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INTRODUCTION  TO  AJAX 


Introduction  to 
AJAX 


1.1  History  of  AJAX 


Ajax  is  a  concept  —  a  way  of  making  the  web  more  interactive, 
and  as  such  was  never  really  created  or  introduced.  In  fact, 
the  concept  existed  much  before  it  became  popular.  However, 
the  term  was  coined  in  2005,  by  Jesse  James  Garrett,  founder 
of  Adaptive  Path. 

With  the  introduction  of  the  iframe  element  in  HTML 
by  Internet  Explorer  in  1996,  web  developers  can  now  asyn- 
chronously load  another  web  page  in  a  section  of  a  currently 
loaded  page.  By  using  an  iframe  with  zero  dimensions,  you 
could  use  an  iframe  to  load  content  from  another  page, 
extract  the  relevant  parts  and  inject  it  into  your  own  page,  all 
in  the  background. 

In  1999,  the  new  XMLHttpRequest  ActiveX  control  was 
developed  by  Microsoft  for  Internet  Explorer.  The  new  object 
can  asynchronously  load  pages,  from  any  web  site  as  desired 
by  the  developer.  As  of  now,  this  is  available  in  all  major 
browsers  such  as  Firefox,  Safari  and  Opera. 

In  2006,  this  control  was  standardised  by  the  world  wide 
web  consortium  (W3C),  in  a  draft  specification.  As  a  result, 
once  finalised,  any  new  browser  that  plans  to  follow  web  stan- 
dards will  have  to  support  this  object. 


3 


1.2  Setting  it  up 

JavaScript,  XML  and  HTML  are  pure  text  formats,  and  the  only 
programming  tool  you  really  need  is  a  text  editor.  If  you  prefer 
manual  coding,  you  should  either  prefer  Notepad++,  or  a  pure 
text  editor. 
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An  integrated  development  environment  (IDE)  is  unneces- 
sary in  this  case,  as  you  will  not  even  need  to  compile  any- 
thing. However,  working  with  one  improves  productivity  as  it 
will  support  syntax  highlighting,  code  completion,  and  will 
warn  you  if  you  mistype  anything. 
A  Unless  you  plan  to  do  some  really  heavy  design  work 

for  your  web  site,  Aptana  Studio  is  a  good  choice.  It  isn't  a 
WYSIWYG  editor,  which  may  be  a  turn-off  if  you  intend  to 
make  complicated  layouts.  However,  for  getting  your  layout 
off  the  ground,  you  can  use  free  and  open  source  applications 
such  as  Komposer,  or  Amaya.  If  you  you  really  want  to  go  for 
A  web  development,  Dreamweaver  is  a  professional  solution  by 
j  Adobe. 

A  So  to  effectively  use  this  Fast  Track  to  AJAX,  you  should 

have  the  following  software  installed  on  your  computer: 
Aptana  Studio 
Notepad++ 

A  Browser  (preferably  Mozilla  Firefox  with  the  FireBug 
addon) 
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2.1  Introduction 

XML  is  all  over  the  place  these  days,  whether  you're  checking 
out  an  RSS  or  Atom  field,  or  using  Microsoft  Office  2007's 
new  DOCX  format.  The  reason  for  its  popularity  stems  from 
the  fact  that  it  is  an  open  standard  that's  highly  extensible 
and  has  a  wide  range  of  tools  and  techniques  available  for 
processing  it. 

One  thing  you  should  know  about  XML  is  —  by  itself, 
it  doesn't  define  a  language.  Instead,  it's  a  specification  of 
how  one  may  create  a  language.  It's  very  flexible,  and  can 
be  used  to  represent  almost  any  kind  of  data,  as  such  it  is  a 
perfect  candidate  for  data  transfer  over  the  internet.  As  long 
as  the  data  follows  the  XML  specification,  the  creator  can  be 
sure  that  any  tool  capable  of  processing  XML  will  be  able  to 
decode  it. 

Over  time,  many  data  formats  have  been  lost  as  develop- 
ers did  not  document  how  data  structures  are  stored  within  a 
file.  XML  is  plain  text  and  hence  human  readable.  Therefore, 
such  a  problem  is  eliminated,  and  data  in  most  cases  docu- 
ments itself.  Let's  look  at  a  common  XML  format  called  RSS. 


<?xml  version="l . 0 " ?> 
<rss  version="2 . 0"> 
<channel> 
<title> 

Liftoff  News 
</title> 
<link> 

http://liftoff.msfc.nasa. gov/ 
</link> 
<description> 

Liftoff  to  Space  Exploration. 
</ clescription> 
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<language> 


</language> 
<pubDate> 


en-us 


T 
R 
A 
C 
K 


Tue,    10  Jun  2003  04:00:00  GMT 
</pubDate> 
<lastBuildDate> 


Tue,    10  Jun  2003  09:41:01  GMT 


</lastBuildDate> 
<docs> 

http : / /blogs . law . harvard . edu/ tech/ rss 
</ docs> 


</ generator> 
<managingEditor> 

editor@example . com 
</managingEditor> 
<webMaster> 

webmaster@example . com 
</webMaster> 
<item> 

<title> 

The  Engine  That  Does  More 

</title> 

<link> 

http : / / liftoff . msfc . nasa . gov/ 
news/2003/news-VASIMR. asp 
</link> 
<description> 

Before  man  travels  to  Mars,  NASA 
hopes  to  design  new  engines  that  will  let  us 
fly  through  the  Solar  System  more  quickly.  The 
proposed  VASIMR  engine  would  do  that. 


</ description> 
<pubDate> 

Tue,   27  May  2003  08:37:32  GMT 
</pubDate> 
<guid> 

http: //liftoff .msfc.nasa.gov/2003/05/27 . 


A 
J 

A 

X 


<generator> 

Weblog  Editor  2.0 
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html#item571 

</ guid> 
</item> 
<item> 
<title> 

Astronauts'   Dirty  Laundry 
</title> 
<link> 

http://liftoff.msfc.nasa.gov/ 
news/ 2 00 3 /news- laundry. asp 
</link> 
<description> 

Compared  to  earlier  spacecraft,  the 
International   Space   Station  has  many  luxuries, 
but    laundry    facilities    are    not    one    of  them. 
Instead,    astronauts  have  other  options . 
</ description> 
<pubDate> 

Tue,   20  May  2003  08:56:02  GMT 
</pubDate> 
<guid> 

http:/ /liftoff .msfc.nasa.gov/2003/05/20 . 
html#item57  0 

</ guid> 
</item> 
</ channel> 


At  first  glance,  this  may  seem  complicated.  However,  in 
the  future,  if  all  specifications  of  XML  and  RSS  are  lost,  this 
would  be  much  easier  to  decipher  than: 


BEE  FAST  TRACK 


11 


□ 

www.thinkdigit.com 

F 

A 

This  is  a  screenshot  of  a  PDF  file  opened  in  Notepad++. 

S 

Perhaps  only  a  seasoned  developer  who  has  worked  a  lot  on 

T 

PDF  might  be  able  to  recognise  it!  You  can  take  any  random 

j 

section  of  XML  data  and  get  some  information  out  of  it. 

R 

So  let's  start  with  the  basic  rules  of  XML.  Here,  we  will 

A 

focus  only  on  the  basic  features  required  to  make  a  valid  XML 

C 
K 

file  suitable  for  use  in  AJAX. 

T 

2.2  The  XML  structure 

u 

XML  is  a  tag-based  language  —  the  data  that  you  need  to  rep- 

A 

resent  has  to  be  grouped  and  organised  within  tags.  It  is  very 

J 

easy  to  represent  structured  data  in  XML.  Let's  consider  an 

A 

A 

example  of  data  we  use  every  day,  and  see  how  it  can  possibly 

X 

to  represented  in  XML. 

2.2.1  A  simple  to-do  list 

<todo> 

<task  duration="12mins"  completed="No"> 

</task> 

<task  duration="30mins"  completed="Yes"> 

Dry- clean  Rug 

</task> 

<task  duration="5hrs"  completed="No"> 

Complete  report 

</task> 

</todo> 

2.2.2Contact  data 

<addressbook> 

<contact> 

<name> 

John  Doe 

</ name> 

<phone  type="home"> 

01122245656 

</phone> 
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<phone  type="mobile"> 

+919912345567 
</phone> 
<email> 

j  ohn . doeSgmail . com 
</ email> 
<email> 

j ohn  doe  43@ymail.com 
</ email> 
<address> 

123, St.   4, Plot  5,Sixganj,Sevenpur,MP,462006 

</ address> 
<image> 

/ contacts-images/ j  doe . png 
</ image> 
</contact> 


</ addressbook> 

2.2.3  Image  gallery: 

This  following  is  a  trimmed  down  version  of  how  Picasa 
exports  galleries  in  the  XML  format. 

<album> 

<albumName> 

School  Trip 
</ albumName> 
<albumItemCount> 

3 

</albumItemCount> 
<albumCaption> 

Pictures    taken    during    school    trip  to 

Dehradun . 

</ albumCaption> 
<images> 
<image> 

<itemLargeImage> 

images/ image315 . jpg 
</ itemLarge!mage> 
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<itemWidth> 


240 

</itemWidth> 
<itemHeight> 


T 
R 
A 
C 
K 


320 

</itemHeight> 
<itemName> 


image315 . jpg 
</itemName> 
<itemN umber > 


T 
0 


36 

</ itemNumber> 
<itemOriginalPath> 


A 
J 

A 

X 


C:\Users\User666\Pictures\2008\july 


12\image315 .jpg 

</ itemOriginalPath> 
<itemCaption> 

At  the  train  station. 
</itemCaption> 
<itemSize> 

245kb 
</ itemSize> 
</ image> 


</ images> 
</ album> 


If  you  decide  to  include  a  new  feature  in  an  app,  say  for 
example,  enabling  your  contacts  to  now  store  their  images. 
All  you  would  need  to  do  is  add  a  tag  for  it  and  you're  done! 
This  new  contact  data  file  will  continue  to  work  with  the 
older  app  as  the  older  version  will  just  ignore  the  tag  for  the 
contact  image.  Or  if  you  decide  that  your  to-do  app  should 
now  have  sub-tasks,  you  could  have  a  to-do  tag  inside  another 
to-do  tag,  and  depending  on  how  your  previous  application  is 
designed,  it  would  either  ignore  the  sub-tasks  or  show  all  of 
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XML | 

a 

them  unstructured. 

u.  < 

Let  us  go  over  some  rules  for  complying  with  the  XML 

S 

standard. 

T 

•  An  XML  document  can  have  only  one  root  tag.  This  is  shown 

T 

as  follows. 

p 

K 

Correct  Syntax 

Incorrect  Syntax 

A 
C 

<todo> 

■ctssk  durst ion=n  1 2mins 11 

K 

<task  durati on=" 1 2mins " 

completeci=nNon> 

T 

completed=nNo" > 

Get  Milk 

0 

Get  Milk 

</task> 

A 
A 

<task  duration="30mins" 

<task  duration="30mins" 

j 

completed="Yes"> 

completed="Yes"> 

A 

Dry-clean  Rug 

Dry-clean  Rug 

X 

</task> 

</task> 

<task  duration="5hrs" 

completed="No"> 

<task  duration="5hrs" 

Complete  report 

completed="No"> 

</task> 

Complete  report 

</todo> 

</task> 

•  Each  opening  element  must  have  a  closing  element. 

Correct  Syntax 

Incorrect  Syntax 

<todo> 

<todo> 

<task  duration="12mins" 

<taskduration="12mins" 

compl eted= " No " > 

completed="No"> 

Get  Milk 

Get  Milk 

</task> 

<taskduration="30mins" 

<task  duration="30mins" 

completed="Yes"> 

completed="Yes"> 

Dry-clean  Rug 

Dry-clean  Rug 

</task> 

</task> 

<task  duration="5hrs" 

<task  duration="5hrs" 

completed="No"> 

completed="No"> 

Complete  report 

Complete  report 

</task> 

</task> 

</todo> 
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•  Element  attributes  must  be  enclosed  in  single  or  double 

quotes. 

Incorrect  Syntax 

<tOQO?> 

<todo> 

<t3.sk  dur"stion="  1 2mins 11 

<task  duration= 

cornpleted=uNou> 

*12mins'  completed="No"> 

US  X.   lvll  X  K 

bet  MllK 

*c  /  t3.sk> 

< / task> 

<ts.sk  dur"3.ti on="  3  Omi ns  " 

<taskduration="30mins" 

completed=' Yes' > 

completed="Yes"> 

Djry-  clssn  Ruct 

Dry- clean  Rug 

</task> 

</task> 

<task  duration="5hrs" 

<task  duration="5hrs" 

completed='  No'  > 

completed="No"> 

Complete  report 

Complete  report 

</task> 

</task> 

</todo> 

</todo> 

•  Each  attribute  may  occur  only  one  time. 

Correct  Syntax 

Incorrect  Syntax 

<todo> 

<todo> 

<task  duration="12mins" 

<taskduration="12mins" 

completed="No"> 

completed="No" 

Get  Milk 

completed="Yes"> 

</task> 

Get  Milk 

</task> 

<task  duration="30mins" 

<taskduration="30mins" 

completed="Yes"> 

completed= ' Yes ' > 

Dry-clean  Rug 

Dry-clean  Rug 

</task> 

</task> 

<task  duration="5hrs" 

<task  duration="5hrs" 

completed=  "No"> 

duration="15hrs" 

Complete  report 

completed=' No'  > 

</task> 

Complete  report 

</todo> 

</task> 

</todo> 
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a 

•  Tags  must  be  properly  nested. 

u.    <  U 

Correct  Syntax 

Incorrect  Syntax 

T 

<todo> 

<todo> 

j 

R 

<task  duration="12mins" 

<task  duration="5hrs" 

A 

compl eted= " No " > 

completed= ' No ' > 

C 

Get  Milk 

Complete  report 

K 

</task> 

</todo> 

<task  duration="30mins" 

</task> 

T 

completed= ' Yes  '  > 

0 

Dry-clean  Rug 

A 

</task> 

J 

<task  duration="5hrs" 

A 

completed= ' No ' > 

X 

Complete  report 

</task> 

</todo> 

•  Element  names  are  case-sensitive 

Correct  Syntax 

Incorrect  Syntax 

<todo> 

<todo> 

<task  duration="12mins" 

<taskduration="12mins" 

completed="No"> 

completed="No"> 

Get  Milk 

Get  Milk 

</task> 

</TASK> 

<task  duration="30mins" 

<tasK  dur at ion= " 3  Omins " 

completed= ' Yes ' > 

completed= ' Yes  '  > 

Dry-clean  Rug 

Dry-clean  Rug 

</task> 

</task> 

<task  duration="5hrs" 

<task  duration="5hrs" 

completed= ' No ' > 

completed= ' No ' > 

Complete  report 

Complete  report 

</task> 

</task> 

</todo> 

</todo> 
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These  are  the  rules  for  a  document  to  conform  to  the  XML 
standard.  However,  depending  on  the  nature  or  use  of  the 
XML  document,  further  restrictions  may  apply.  For  example, 
in  case  of  RSS  feeds,  the  tag  names,  and  the  way  they  are  sup- 
posed to  be  nested  is  clearly  defined. 

XHTML  is  another  example  of  an  XML-compliant  format 
with  extra  requirements.  XHTML  is  not  a  new  language;  it 
is  merely  an  update  to  HTML,  to  make  it  compliant  with  the 
XML  standard.  HTML  has  some  syntactical  elements  that  do 
not  abide  by  the  XML  standard.  For  all  future  purposes,  HTML 
will  follow  the  XML  standard. 

2.4  XML  in  A  J  AX 

XML  is  a  very  powerful  way  of  implementing  AJAX.  However, 
this  is  not  essential.  XML  is  used  in  AJAX  primarily  to  retrieve 
data  from  the  server,  and  unlike  the  examples  shown,  the  XML 
code  is  usually  generated  on  the  fly  using  server-side  scripts 
along  with  database  access.  RSS  feeds  provided  by  major  sites 
are  basically  server-side  scripts,  which  compile  a  list  of  items 
from  the  requested  list,  and  puts  them  in  an  XML  format  that 
is  compliant  with  RSS. 

Server-side  scripting  is  out  of  the  scope  of  this  book. 
However,  you  shouldn't  feel  like  you  have  accomplished  noth- 
ing. You  can  still  work  with  static  XML  files  you  create,  or  you 
can  use  the  XML  feeds  provided  by  a  variety  of  applications 
found  on  the  web. 


2.4.1  Disadvantages  of  using  XML 

One  of  the  biggest  disadvantages  of  XML  is  often  the  fact 
that  it  has  a  lot  of  overhead.  This  means  that  the  actual  data 
content  of  an  XML  file  is  quite  low,  as  a  lot  of  space  is  wasted 
in  tags.  As  a  result,  this  is  not  a  very  efficient  medium  for 
transporting  data. 

Consider  the  following  example: 
<addressbook> 
<contact> 
<name> 

Tag  Jones 
</ name> 
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</ age> 
<birthday> 


<age> 
12 


F 

A 
S 
T 


</birthday> 
<address> 


11-08-1958 


T 
R 
A 
C 
K 


34,    Someplace,    Some   lane,    Some  City, 
Some  State,    Some  country 
</ address> 
<email> 

abc@xyz . com 


</private> 
</ contact> 
</ addressbook> 

The  additional  information  here  is  merely: 

Tag  Jones;  12;  11-08-1958;  34,  Someplace, 
Some  lane,  Some  City,  Some  State,  Some  country; 
abc@xyz.com;  1 

The  data  is  a  mere  101  characters  compared  to  the  XML 
version,  which  is  247  characters  —  an  efficiency  of  41  per  cent! 
The  most  inefficiently  stored  data  is  the  age  field,  which  is 
usually  just  two  characters;  and  the  private  flag,  which  is  a 
single  character.  The  efficiency  further  reduces  if  the  data  has 
a  lot  of  flags  i.e.  YES  /  NO  options. 

We  could  accomplish  the  same  thing  we  have  done  with 
the  above  XML  in  a  much  more  efficient  manner  by  rewriting 
it  as  follows: 


<n>Tag  Jones</n> 
<g>12</g> 
<b>ll-08-1958</b> 
<d> 

34,  Someplace,  Some  lane,  Some  City,  Some 
State,    Some  country 


</ email> 
<private> 
1 


A 
J 

A 

X 


<a> 


<c> 
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</d> 

<e>abc@xyz . com</ e> 
<p>K/p> 
</c> 
</a> 

This  is  159  characters,  or  an  efficiency  of  approximately 
64  per  cent.  In  doing  so,  however,  we  lose  the  most  important 
benefit  of  using  XML  in  the  first  place:  That  is  to  make  it  easily 
readable  by  humans. 

Often,  when  writing  an  AJAX  application,  the  data  is  being 
transferred  from  the  server  to  the  client  directly  and  doesn't 
need  any  human  interpretation.  The  data  is  read  by  the  client, 
is  interpreted,  and  is  then  disposed  of.  As  such,  data  being 
human  readable  isn't  that  important  and  other  less  verbose 
and  more  efficient  formats  are  often  adopted.  The  most 
important  and  popular  one  of  them  is  JSON. 

Another  flaw  that  XML  suffers  from  is  that  it  requires 
significant  processing  before  it  can  be  used  in  the  code.  JSON, 
on  the  other  hand,  is  JavaScript's  native  format  of  data,  and 
as  such  requires  little  or  no  processing  on  the  client  side.  In 
fact,  since  XML  processing  takes  place  in  the  background,  a 
developer  tends  to  use  it  excessively  without  being  aware  of 
how  resource  intensive  it  may  be. 


Conclusion 

You  now  know  enough  on  XML  to  come  up  with  your  own 
innovative  methods  for  storing  data.  XML  is  flexible  enough 
that  you  can  keep  incorporating  new  features  without  break- 
ing old  ones.  However,  it  is  also  important  to  keep  its  flaws 
in  mind. 

Next,  we  will  look  at  HTML,  the  basic  platform  on  which 
you  will  create  your  AJAX  application. 
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HTML 


3.1  Introduction  to  the  web 

Before  we  delve  deep  into  HTML,  let  us  look  at  how  the  inter- 
net works.  Starting  with  the  URL,  this  stands  for  uniform 
resource  locator.  It  is  a  uniform  or  standardised  way  of  locat- 
ing a  resource.  We  have  all  used  URLs  while  surfing  the  web, 
and  need  no  further  introduction.  This  is  how  a  URL  works: 

http  ://  www.google.com  /  path/to/file. html 


This  part  tells  the  software 
used  to  access  the  URL, 
that  the  computer  it 
is  connecting  to  will 
communicate  using  the 
http  (HyperText  Transfer 
Protocol)  protocol. 


This  part  says 
that  the  address 
in  located  on  the 
www.google.com 
server 


The  location  on  the 
remote  server  where 
the  file  is  located. 


To  explain  this  by  analogy,  if  you  had  to  tell  your  friend 
to  talk  to  Kiran  Siddappaji  in  English  and  ask  him  about  the 
price  of  one  kilogram  of  rice,  you  might  represent  it  the  fol- 
lowing way  as  a  URL: 

english://Kiran.Siddappaji/petrol/llitre/price 
Thankfully,  a  normal  conversation  is  a  lot  easier!  Another 
important  bit  of  information  is  the  port  number.  Although  it 
doesn't  matter,  sometimes  it  is  necessary.  A  URL  with  a  port 
is  usually  in  the  form  of: 

http://www.google.com:56/something/going/somewhere 
i 

56  is  the  port. 

Usually,  we  need  not  specify  a  port  number,  as  it  is  implied 
in  the  http  part.  Http  is  usually  associated  with  port  80  or 
81,  so  whether  you  enter  http://www.google.com:80  or  http://www. 
google.com  it  still  works  the  same  way.  However,  try  some  other 
number  and  it  may  not  work,  unless  a  server  is  operational 


BED  FAST  TRACK 


21 


www.thinkdigit.com 


on  that  port  as  well.  This  means  that  with  a  single  web  site 
www.google.com  you  can  have  multiple  web  sites,  as  ports  range 
from  1  to  65,  535! 

Finally,  you  are  connected  to  a  server  talking  in  HTTP, 
which  basically  means  that  the  pages  are  formatted  in  HTML. 
HTML  content  is  now  retrieved  by  the  user,  and  is  interpreted, 
processed  and  displayed  on  the  users'  browser. 

There  are  other  protocols  besides  HTTP.  For  example, 
HTTPS,  UDP,  news,  gopher  and  FTP.  However,  since  it  merely 
tells  the  software  application  what  language  the  destination 
speaks,  it  is  usually  safe  to  omit,  as  most  software  operate  on 
very  few. 

When  you  open  a  URL  in  your  browser,  it  connects  to  the 
server  specified  at  the  default  or  specified  port,  and  retrieves 
the  requested  data.  If  it  is  communicating  with  an  HTTP  web 
site,  the  communication  will  follow  a  different  format,  as 
compared  to  an  FTP  server. 


3.2  HTML  tags 

Like  XML,  HTML  is  also  a  tag-based  language  and  has  now 
been  made  to  conform  to  the  XML  standard,  with  the  new 
XHTML  specification. 

The  HTML  standard  limits  the  tags  you  can  use,  and 
assigns  a  meaning  to  each  tag.  Some  common  tags  are: 

html  This  is  the  root  tag  which  encloses  the 

entire  body  of  the  document. 

head  The  header  area  of  the  document,  this 

part  of  the  document  has  instructions 
for  the  browser,  and  is  not  actually  dis- 
played on  the  output  page. 

title  This  contains  the  title  of  the  page  as 

shown  in  the  browser  window  /  tab. 

meta  Contains  information  about  the  keywords 

and  target  of  the  data  content  of  the  page. 

script  Contains  any  scripts,  usually  JavaScript, 

that  are  used  in  the  page. 

noscript      Defines  content  to  be  displayed  if  user 
browser  doesn't  support  JavaScript. 

body  Contains  the  main  content  of  the  page 
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that  is  to  be  displayed  in  the  browser 

F 
A 

window. 

S 

a                  This  element  creates  a  link  to  the  specified 

T 

URL. 

T 

hi  to  h6         Header  1  to  6 

R 

p                  A  paragraph  element. 

A 

br                 Line  break 

C 

table            Used  to  represent  data  in  a  tabular  form. 

K 

hr                 Horizontal  Rule 

td                A  table  cell 

T 

n 

tr                 A  table  row,  contains  td  tags  to  specify 

U 

table  divisions 

A 

b,u,i              Bold,  underline,  italicise,  now  depreciated 

J 

in  favour  of  CSS  styling 

A 

div               Defines  a  section  within  the  document 

X 

span 

object          Allows  you  to  embed  objects  such  as  Flash, 

and  Java. 

3.3  Learning  basic  HTML 

As  usual,  we  start  off  with  a  Hello  World  example,  just  to  be 

polite. 

<html> 

<body> 

Hello  World 

</body> 

</html> 

That's  it!  And  now  that  we've  wished  the  world  well,  let's 

go  on  to  more  serious  business.  How  about  a  simple  list  with 

the  names  of  your  favourite  movies?  And  let's  give  it  a  title 

as  well. 

<html> 

<head> 

<title>My  Favorite  Movies</title> 

</head> 

<body> 

<ul> 

<li>The  Matrix  Series</li> 
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<li>The  Lord  of  the  Rings  Series</li> 
<li>Memento</li> 
<li>Star  Wars  Series</li> 
<li>Batman  Begins</li> 
<li>The  Dark  Knight</li> 
<li>Gattaca</li> 
<li>Shawshank  Redemption</li> 
</ul> 
</body> 
</html> 

Since  this  is  an  article  on  AJAX,  let's  see  how  you  could  use 
this  in  an  AJAX  scenario.  You  could  perhaps  have  a  textbox 
below  the  list,  which  allows  you  to  add  your  favourite  movies 
to  the  list.  This  example  may  seem  a  little  complicated  at  first, 
but  once  you  break  it  down  it's  really  quite  simple. 

Let's  analyse  the  structure  of  the  document: 

•  The  entire  document  is  enclosed  within  an  HTML  tag. 

•  The  document  has  a  heading,  which  is  not  displayed,  and 
other  attributes  such  as  referenced  scripts  and  style. 

•  The  visible  part  of  the  page  is  put  inside  the  'body'  tag. 
This  tag  contains  the  entire  visible  content  of  the  page. 
In  this  document,  we  have  each  movie  name  enclosed 

within  an  <li>  tag.  The  <li>  tag  is  for  defining  list  items, 
and  as  we  want  all  of  these  movies  to  appear  in  a  list  form,  we 
need  to  enclose  each  item  inside  its  own  <li>  tag  element. 
Now  we  put  the  entire  list,  with  all  the  <li>  elements  inside 
of  the  <ul>  element. 

The  <ul>  tag  is  used  to  define  unordered  lists,  i.e.  bulleted 
lists.  When  you  test  this  with  a  browser,  you  will  notice  that  it 
appears  as  an  unnumbered  bulleted  list.  If  you  want  the  list  to 
be  numbered,  all  you  need  to  do  is  replace  the  <ul>  opening 
and  closing  tags  with  <ol>.  The  <ol>  tag  is  for  ordered  lists, 
i.e.  lists  on  which  the  number  is  displayed  before  each  item. 
In  fact,  once  you  learn  a  bit  of  JavaScript,  you  could  even  leave 
the  choice  to  the  user  to  define  how  to  display  the  list. 

HTML  was  designed  to  make  changes  to  the  style  with- 
out damaging  the  contents  of  the  document.  The  title 
element  is  what  decides  the  text  on  the  title  bar  of  the 
browser,  or  the  tab  in  which  the  page  is  open.  In  addition, 
we  should  also  include  a  title  inside  the  page.  We  can  do 
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this  by  using  from  the  hi  to  h6  tags  that  allow  you  to  have 

F 
A 

multiple  levels  of  structure  within  the  page.  For  example, 

S 

we  could  do  the  following: 

T 

<html> 

T 

<head> 

R 

<title>My  Favorite  Movies</title> 

A 

</head> 

C 

<body> 

K 

<hl>A  List  of  my  favorite  Movies</hl> 

<h2>Movie  Series :</h2> 

T 

n 

<ul> 

u 

<li>The  Matrix  Series</li> 

A 

<li>The  Lord  of  the  Rings  Series</li> 

J 

<li>Star  Wars  Series</li> 

A 

</ul> 

X 

<h2>Individual  Movies :</h2> 

<ul> 

<li>Memento</li> 

<li>Batman  Begins</li> 

<li>The  Dark  Knight</li> 

<li>Gattaca</li> 

<li>Shawshank  Redemption</li> 

</ul> 

</body> 

</html> 

HTML  is  powerful  for  laying  out  content  on  a  page. 

However,  it  is  pretty  limited  in  terms  of  style.  Removing  of 

formatting  and  also  changing  formatting  can  be  a  tedious 

task  because  HTML  formatting  is  done  via  tags.  For  these 

things  CSS  comes  in  very  handy,  and  it  is  what  we  will  be 

learning  next.  Just  like  HTML,  it  can  easily  be  controlled 

via  JavaScript. 

3  4  CSS 

To  further  segregate  the  document's  presentation  and  con- 

tent, CSS  comes  very  handy.  CSS  (abbreviation  for  cascading 

style  sheets)  is  a  powerful  way  to  control  the  way  a  web 

page  looks,  and  give  it  that  dynamic  feel  without  actually 

resorting  to  coding. 
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CSS  is  very  powerful  in  describing  the  style  of  documents, 
and  defining  complicated  rules  for  the  style  that  should  be 
applied  to  a  particular  element  and  under  what  conditions. 
For  example,  if  we  wanted  all  links  to  be  bold  and  green  under 
normal  conditions,  and  red  and  underlined  when  the  mouse 
is  hovered  over  it,  the  code  would  be  as  follows: 

<style> 
<!  — 

a  { 

color:  #00ff00; 
font-weight :  bold; 

} 

a: hover  { 

color:  #ff0000; 
text-decoration:  underline; 

} 

— > 

</style> 


This  would  be  placed  inside  the  document  header. 

Basically,  all  styles  are  placed  within  a  <style>  tag, 
enclosed  within  the  comment  tag  <  !  —  — >.  They  can  also  be 
placed  in  a  CSS  file,  and  included  within  the  HTML  page.  To 
include  a  CSS  file  or  stylesheet  (known  as  my_style.css)  in  an 
HTML  file,  we  use  the  <link>  tag  in  the  header  of  the  docu- 
ment. The  syntax  to  do  so  is: 

<link  rel="stylesheet"  type="text/css" 
href="my  style. css"/> 

In  CSS,  to  define  any  sort  of  style,  you  need  to  have  two 
things  ready.  First,  what  all  elements  it  should  apply  to,  i.e. 
the  scope  of  the  style,  also  known  as  the  selector.  Second,  you 
need  to  provide  what  styles  you  want  to  apply  to  it.  This  is 
similar  to  the  situation  where  you  need  to  assign  a  particular 
value  to  a  variable.  Here,  you  need  the  name  of  the  variable  as 
well  as  the  value  you  want  to  assign. 

However,  unlike  a  case  of  assigning  a  value  to  a  variable, 
we  are  applying  a  set  of  styles  to  a  group  of  elements.  This  is  a 
group  assignment  rather  than  a  one-to-one  correlation. 
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First,  we  need  to  select  what  parts  of  the  page  we  want  to 
apply  these  rules.  For  this,  we  have  to  come  up  with  a  selector, 
or  a  common  pattern  that  all  the  elements  that  need  to  be 
styled  that  way  have. 

To  simply  apply  a  style  to  all  elements  of  a  particular  tag, 
as  in  the  example  shown  before,  the  selector  is  just  the  name 
of  the  tag: 
a  { 

color:  #00ff00; 
font-weight :  bold; 

} 

This  would  make  all  the  text  that  appears  inside  an  <a> 
tag  (i.e.  all  links),  green,  and  bold. 

If  you  want  to  apply  the  same  rule  to  multiple  elements, 
you  can  separate  those  using  commas.  For  example,  if  you  also 
wanted  all  list  elements  and  hi  elements  to  also  appear  green 
and  bold,  the  code  would  be  as  follows: 
a,hl,li  { 

color:  #00ff00; 
font-weight :  bold; 

} 

Often,  we  would  not  simply  want  to  make  everything  in 
all  instances  of  a  tag  look  the  same.  In  such  cases,  we  can  use 
the  class  selector.  If  you  want  to  have  different  styles  in  differ- 
ent sections  of  the  page,  classes  can  come  very  handy.  A  class 
selector  is  defined  using  a  class  name  preceded  by  a  dot.  In 
the  following  example,  we'll  define  four  different  styles  for 
four  different  sections  of  the  page: 
.normaltext  { 

color:  #000000; 

text-align:  left; 

text-indent:  5px; 

} 

.specialtext  { 

color:  #00ff00; 
font-weight:  bold; 

} 

.header  { 

color:  #00ffff; 
font-weight:  bold; 


BED  FAST  TRACK 


27 


www.thinkdigit.com 


font-size:  large; 
background-color:  #000000; 

} 

. footer  { 

color:  #ffffff; 
font-size:  small;; 
background-color:  #000000; 


Here  we  have  defined  the  following  four  classes: 

•  .normaltext:  This  class  is  defined  for  all  the  normal  con- 
tent text  that  will  appear  on  the  page.  It  is  black  in  colour, 
aligned  to  the  left,  and  has  an  indentation  of  5  pixels. 

•  .specialtext:  This  class  is  for  any  special  text  we  need  to 
highlight.  This  could  be  an  important  sentence  or  word  in 
a  paragraph.  It  is  green  in  colour,  and  bold. 

•  .header:  This  is  for  the  content  of  the  header  of  the  page. 
It  is  cyan  in  colour,  with  a  black  background,  using  a  large 
text  size  in  boldface. 

•  .footer:  This  is  for  all  the  footer  text.  Usually  copyright 
notices,  etc.  It  will  be  white  text  in  a  black  backdrop,  and 
a  small  font  size. 

It  is  not  sufficient  to  just  define  these  classes.  You  need  to 
specify  where  to  apply  them  too.  To  do  this,  we  add  the  'class' 
attribute  having  the  name  of  the  class  as  its  value  to  all  the 
elements  to  which  the  style  is  applicable. 

To  apply  the  footer  class  style  to  the  contents  of  a  div  ele- 
ment, do  the  following: 

<div  class="footer"> 

Content  of  div  element 
</div> 


CSS  supports  some  very  advanced  selectors.  You  can 
specify  quite  complicated  rules  for  what  style  applies  to 
which  part  of  the  document.  Since  CSS  is  a  vast  subject  in 
itself,  it  is  out  of  the  scope  of  this  book  to  go  into  details. 
However,  most  of  the  useful  rules  can  be  illustrated  using 
the  examples  as  follows: 

Example  1: 

To  make  all  the  text  of  all  paragraph  element  (<p>)  which 
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reside  in  <div>  elements  green  and  bold,  we  can  do: 

div  p  { 

color:  #00ff00; 
font-weight :  bold; 

} 

Example  2: 

To  make  all  the  text  green  and  bold  in  all  paragraph  ele- 
ments (<p>)  which  have  the  class  'tree'  modify  the  code  as 
follows: 

p. tree  { 

color:  #00ff00; 
font-weight :  bold; 

} 

Example  3: 

To  make  all  the  text  appear  green  when  you  hover  the 
mouse  over  them,  then  use  the  following: 

a: hover  { 

color:  #00ff00; 
font-weight :  bold; 

} 

Example  4: 

To  make  all  the  text  of  all  <a>  links  which  link  to  the  page 
http://www.google.com  green,  we  do: 

a [href ="http: / /www . google . com"]  { 
color:  #00ff00; 
font-weight:  bold; 

} 


One  very  important  thing  about  CSS  styles  is  that  they 
cascade,  hence  the  name  Cascading  style  sheets.  What  this 
means  is  that  if  you  apply  a  style  to  a  <div>  tag,  and  a  differ- 
ent tag  to  the  <p>  elements  inside  it,  with  a  different  style  to 
the  <a>  elements  in  that,  the  resultant  style  of  the  <a>  ele- 
ment will  be  a  combination  of  the  styles  applied  to  the  <div>, 
and  the  <p>  and  the  <a>  tags.  In  case  of  a  conflict  in  styles, 
precedence  is  given  in  the  following  order: 

i.  They  are  overridden  by  external  style  sheet  styles 

ii.  They  are  overridden  by  internal  style  sheet  styles 

iii.  They  are  overridden  by  inline  styles 

The  resultant  styles  are  then  applied  to  the  element. 
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Now  just  to  show  you  exactly  how  flexible  CSS  can  be,  and 
how  you  can  achieve  splendid  effects  using  CSS  alone,  let  us 
go  back  to  our  list,  and  format  it  using  CSS. 

We  will  leave  the  headings  as  they  are,  but  we  will  make 
this  into  a  menu,  so  that  someone  can  click  on  a  movie's 
name  and  go  to  its  web  site.  For  this,  each  movie  has  to  be 
placed  inside  an  <a>  tag,  with  the  URL  of  the  web  site  in  the 
href  attribute. 

Here  is  the  new  HTML  code: 

<html> 
<head> 

<title>My  Favorite  Movies</title> 
<link    rel="stylesheet"  type="text/css" 
href="my  style. ess"  /> 
</head> 
<body> 

<hl>A  List  of  my  favorite  Movies</hl> 

<h2>Movie  Series :</h2> 

<ul> 


<liXa 

a></li> 

<lixa 
Series</a></li> 

<li><a  href= 


href=".">The  Matrix  Series</ 
href=".">The  Lord  of  the  Rings 


li> 


</ul> 

<h2>Individual 

<ul> 

<li><a  href- 
<lixa  href- 
<lixa  href= 


li> 


<lixa 
<lixa 


href =" 
href ='' 


'>Star  Wars  Series</a></ 


Movies :</h2> 

' .  ">Memento</aX/li> 

' .  ">Batman  Begins</ax/li> 

".">The  Dark  Knight</a></ 

' .  ">Gattaca</aX/li> 

'>Shawshank  Redemption</ 


ax/li> 

</ul> 
</body> 
</html> 

As  you  can  see,  little  has  changed  except  that  each  list 
element  is  now  individually  enclosed  inside  an  <a>  tag,  and 
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the  stylesheet  is  now  included  in  the  document.  Enclosing 
the  whole  block  of  code  within  the  <a>  tag  is  one  option. 
However,  each  movie  has  to  link  to  a  different  page,  and  put- 
ting them  in  the  same  block  wouldn't  help.  Also,  even  if  we 
wanted  to  link  them  all  to  the  same  page,  the  results  would 
differ  from  what  we  wanted  —  each  link  should  individually 
behave  like  a  button. 

Linking  them  to  ' . '  means  that  clicking  on  them  will  open 
the  directory  in  which  the  file  is  placed. 

Now  for  the  CSS  part: 

li  { 

margin:    5px  5px  5px  5px; 

} 

a  { 

color:  #ffffff; 
background-color:  #232323; 
border:  solid; 
border-width:  thin; 
border-color:  #0f0f0f; 
text-decoration:  none; 
margin:    5px  5px  5px  5px; 
padding:   2px  2px  2px  2px; 


} 


a: hover  { 

background-color:  #4e4e4e; 
padding:    5px  5px  5px  5px; 

} 

The  first  style  is  applied  to  the  <li>  elements,  and  is  just 
to  give  enough  space  around  them  make  the  button  appear 
clearly. 

The  second  style  is  for  the  anchor  element  <a>.  It  does  the 
following: 

•  Sets  the  text  colour  to  #FFFFFF  or  white 

•  Sets  the  background  colour  to  #232323,  which  is  a  deep 
shade  of  grey. 

•  Tells  the  browser  to  draw  a  thin  border  around  the  text,  of 
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colour  #0F0F0F,  which  is  a  very  dark  shade  of  grey. 


•  Tells  the  browser  not  to  display  an  underline,  using  the 
text-decoration  style. 

T  •  Sets  the  margin  around  the  border  to  5  pixels  on  the  top, 
R  right,  bottom  or  left. 

A       •   Sets  the  padding  around  the  text  to  2  pixels  on  the  top, 

C  right,  bottom  or  left. 

The  third  style  is  for  the  hover  state  of  the  <a>  tag.  When 
you  move  your  mouse  over  the  text,  it  uses  the  same  styles 
with  a  slight  change  made  to  it.  It  does  the  following: 

•  Makes  the  background  colour  a  lighter  shade  of  grey. 

A  •  Expands  the  space  around  the  text,  to  give  the  effect  that 
j  the  button  is  expanding. 

A  This  way,  you  can  achieve  powerful  effects  with  just  CSS 

alone,  and  since  they  can  be  controlled  via  JavaScript,  there 
is  no  limit  to  what  you  can  do  with  it.  What  we  have  touched 
here  is  just  the  tip  of  the  iceberg.  More  on  JavaScript  follows. 
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4.1  Introduction  to  JavaScript 

JavaScript  is  what  drives  the  web  and  has  defined  the  Web  2.0 
experience.  No  one  can  deny  the  fact  that  it  has  made  the  web 
a  much  more  interactive  place. 

JavaScript  was  created  to  make  the  web  more  interactive. 
Although  it  was  introduced  way  back  in  the  days  of  Netscape, 
it  is  now  available  on  all  browsers  and  has  been  standardised 
by  ECMA  as  ECMAScript.  By  standardised,  it  means  it  will  have 
the  same  syntax  and  effect  on  all  browsers. 


4.2  ...of  browsers  and  DOM 

The  document  object  model  (DOM)  is  the  browser's  internal 
representation  of  the  HTML  page.  It  defines  how  the  browser 
and  the  developer  'sees'  the  page.  One  of  the  biggest  prob- 
lems encountered  while  creating  JavaScript  code  is  that  dif- 
ferent browsers  represent  the  page  differently,  and  thus  the 
developer's  job  is  to  first  find  out  which  browser  the  code  is 
running  on,  and  then  run  the  appropriate  code  written  for 
that  browser. 

In  the  beginning,  all  browsers  were  continuously  add- 
ing features  in  order  to  gain  advantage,  and  this  led  to 
many  non-standard  HTML  tags,  and  JavaScript  procedures. 
Over  time  some  of  those  have  been  accepted  to  become  a 
standard,  such  as  XMLHttpRequest  while  many  others  have 
now  depreciated. 

Since  the  internet  is  a  large  place,  the  vast  variety  of  sys- 
tem configurations  make  the  developer's  job  all  the  more  dif- 
ficult. Even  though  most  browsers  today  are  trying  to  accom- 
modate web  standards,  there  is  still  a  plethora  of  computer 
users  who  are  using  older  browsers. 

You  can  ask  all  those  you  know  to  upgrade  your  brows- 
ers; however,  updating  the  online  community  is  not  possible. 
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Once  you  push  a  new  browser,  it  will  take  some  time,  may 
be  even  years,  for  it  to  represent  a  majority  of  internet  users. 
Even  now,  there  are  people  using  Firefox  1.5  or  Internet 
Explorer  6. 

Even  standards  take  time  to  sink  in,  because  despite  the 
latest  browsers  claiming  to  be  fully  standards-compliant 
(which  they  are  not),  we  still  have  the  problem  that  everyone 
will  not  have  the  latest  browser. 

So  between  programming  across  different  browsers,  and 
taking  into  account  the  different  versions  of  those  browsers, 
your  code  can  become  very  complicated  and  bulky  if  you  want 
to  make  it  work  for  everyone.  You  must  also  ensure  that  a 
user  using  a  browser  that  doesn't  support  JavaScript  or  one  in 
which  JavaScript  is  disabled,  is  not  left  stranded. 


JavaScript  can  be  placed  anywhere  in  your  HTML  document 
as  long  as  it  is  enclosed  within  a  <script>  tag,  which  can  be 
placed  anywhere  within  the  body,  or  in  the  header.  If  the  code 
needs  to  be  reused,  it  can  also  be  placed  in  an  external  file 
which  in  referenced  in  the  document,  via  the  <script>  tag's 
'src'  property.  Since  the  header  of  the  document  is  loaded 
before  the  page  starts  displaying,  placing  the  script  in  the 
header  ensures  that  it  is  loaded  before  the  page  can  call  to  any 
functions  defined  in  it. 

If  any  of  you  have  used  C,  C++  or  a  similar  language,  you 
will  find  the  syntax  quite  similar.  The  structure  of  the  code  is 
represented  in  pretty  much  the  same  way.  The  following  is  an 
example  of  some  JavaScript  code  that  takes  two  numbers,  and 
finds  the  highest,  lowest  and  average  of  the  numbers  using 
functions. 

var  a  =  5; 

var  b  =  16; 

var  greater  =  greaterof(a,   b)  ; 
var  lower  =  smallerof (a,   b) ; 
var  average  =  averageof(a,   b)  ; 

function  greaterof (numl ,    num2) { 


4.3  Basic  JavaScript 


return  numl  >  num2   ?  numl 


num2  ; 
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function  smallerof (numl ,   num2) { 

return  numl  <  num2   ?  numl   :   num2 ; 

} 

function  averageof (numl ,   num2) { 
return    (numl   +  num2)    /  2 ; 

} 

Looks  familiar?  Even  if  it  doesn't  seem  familiar,  the  syntax 
itself  is  quite  apparent.  You  can  declare  variables  using  the 
keyword  var,  although  it  isn't  necessary,  and  you  can  just 
write  the  variable  name  and  equate  it  to  its  value. 

Similar  to  most  programming  languages,  JavaScript  dif- 
ferentiates between  equating  and  testing  for  equality.  This 
means,  if  you  need  to  assign  the  value  5  to  a  variable  numl, 
you  do  the  following: 

numl  =  5 ; 

However,  if  you  need  to  check  if  the  value  of  num2  is  1 7 
then: 

num2  =  17; 

Those  familiar  with  programming  will  be  wondering, 
what  is  the  point  of  all  of  this  if  you  are  not  outputing  any- 
thing. Since  JavaScript  is  used  with  HTML,  there  is  no  output 
in  the  traditional  sense.  What  you  will  be  doing  instead,  is 
writing  this  content  to  the  page  in  some  or  the  other  element, 
or  merely  manipulating  the  layout  as  a  result. 

For  those  of  familiar  with  C,  Java  or  similar  languages,  you 
will  notice  the  similar  syntax,  but  for  those  of  you  who  aren't, 
let's  go  through  the  basics  of  the  language: 
Performing  arithmetic: 


Operation 

Description 

Use 

+ 

Addition 

z  =  x  +  y 

Subtraction 

z  =  x  -  y 

* 

Multiplication 

z  =  x  *  y 

/ 

Division 

z  =  x/y 

% 

Modulus  i.e.  Remainder 

z  =  x  %  y 

++ 

Increment 

Z++ 

Decrement 

z- 
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You  can  perform  compound  operations  using  the  opera- 
tors, +=,  -=,  *=,  /=,  %=.  These  are  used  to  perform  an  operation 
on  a  variable,  and  store  the  result  in  the  original  variable.  For 
example,  if  you  need  to  increment  the  variable  'x'  by  '32',  you 
would  normally  do  it  by  writing  'x  =  x  +  32',  using  compound 
operators  you  can  do  this  simply  as  'x  +=  32'. 

Note  that  addition  can  also  be  performed  on  strings. 
Therefore,  to  add  the  strings  "My  name  is"  and  "John  Doe", 
you  can  simply  write  'result  =  "My  name  is  "  +  "John  Doe'". 

Making  comparisons: 


Operation 

Description 

Use 

Test  for  equality 

4  ==  4  is  true 
4  ==  '4'  is  true 

!= 

Test  for  inequality 

4  ==  5  is  false 

> 

Greater  than 

5  >  4  is  true 
8  >  11  is  false 

< 

Less  than 

4  <  5  is  true 
10  <  8  is  false 

>= 

Greater  or  equal 

4  >=  4  is  true 

<= 

Less  or  equal 

11  <=  11  is  true 

Strictly  equal 

4  ===  4  is  true 
t'  ===  't'  is  true 
4  ===  '4'  is  false 

Logical  operations: 


Operation 

Description 

Use 

&& 

And 

a  &&  b  is  true  if  both  a  and  b  are 
true 

II 

Or 

a  II  b  is  true  if  at  least  one  of  a  and 
b  are  true 

i 

Not 

!a  simply  negates  a  such  that  !a  is 
true  if  a  is  false  and  it  is  false  if  a 
is  true 

Branching: 

Branching  is  needed  when  the  outcome  of  the  program 
depends  on  a  particular  condition.  For  example,  if  you  needed 
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to  set  a  variable  'x'  to  '32'  if  'y'  is  greater  that  '5'  and  to  '64' 
otherwise,  you  would  write  this  as: 

if  (y  >  5)  { 
x  =  32; 

} 

else  { 

x  =  64; 

} 

This  can  be  represented  in  a  much  more  compact  nota- 
tion as: 

x  =   (y  >  5)    ?  32    :  64; 

This  achieves  the  same  results  as  before  but  is  much 
more  compact.  However,  if  you  use  the  'if  statement, 
you  can  do  more  than  just  assign  values,  any  type  of 
complicated  code  can  be  inserted  within  the  blocks  after 
'if  or  'else'. 

The  syntax  of  this  operator  is; 

variable  =  (condition)  ?  (value  if  true):  (value  if  false) 
You  can  also  chain  multiple  if...  else  statements  one  after 
one  another  to  perform  different  results  for  different  con- 
ditions. However,  for  many  situations,  you  can  instead  use 
switch...  case. 

Here  is  an  example,  of  how  you  can  use  if  for  selecting 
pizzas: 

switch    (pizza  size)  { 
case   'small' : 
size  =  10; 
break; 

case  'normal' : 
size  =  14; 
break; 

case   'large' : 
size  =  16; 
break; 

} 

This  small  example  will  set  the  'size'  variable  to  the  size  of 
the  pizza  in  inches,  if  the  'pizza_size'  variable  is  set  to  one  of 
'small',  'normal',  and  'large'. 
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Looping: 

With  JavaScript  you  can  use  two  types  of  loops,  the  'for'  loop 
and  the  'while'  loop.  They  can  both  do  the  same  thing,  but  in 
different  ways.  The  'for'  loop  is  more  suited  when  one  needs 
to  iterate  over  fixed  values,  such  as  looping  over  all  the  para- 
graphs in  a  document  and  setting  them  to  bold. 

Let  us  see  an  example  where  we  use  the  for  loop  to  add  the 
first  100  numbers: 

sum  =  0 ; 

for    (i  =  1;   i  =<  100;    i++)  { 
sum  +=  i ; 

} 

The  'for'  loop  has  three  parts  in  the  bracket: 

•  In  the  first  part,  you  set  any  variables  you  need  to,  this  is 
performed  only  once  at  the  beginning  of  the  loop. 

•  In  the  second  part,  you  test  the  condition  for  the  execu- 
tion of  the  loop,  this  is  tested  before  the  loop  is  executed, 
so  if  the  statement  is  false  to  begin  with,  the  loop  will 
never  execute. 

•  The  third  part  performs  operations  that  change  the  coun- 
ter, incrementing  or  decrementing  it. 

•  The  statements  in  the  loop  are  executed  every  time  the 
loop  is  run. 

Now  let's  see  the  'while'  loop  doing  the  same: 

while  (cond==true) 
{ 

...statements... 


Doing  the  same  using  the  for  loop  would  be  unnecessarily 
confusing.  The  'while'  loop  shows  its  strengths  here. 

Functions: 

Functions  are  a  feature  present  in  almost  each  and  every  pro- 
gramming language.  For  anyone  who  has  studied  mathemat- 
ics, understanding  functions  is  not  conceptually  difficult. 
However,  practically,  computer  functions  are  different  and 
more  versatile.  Let  use  see  an  example  of  a  function  which 
returns  the  square  of  an  entered  number: 


38 


HEED  FAST  TRACK 


www.thinkdigit.com 


JAVASCRIPT 


function  square (num) { 

var  num  square  =  num  *  num; 
return  num  square; 


A  function  basically  has  the  following  basic  syntax: 

functionjparamaterl ,  paramater2 , ...) 

{ 

...statements... 
} 

If  the  function  needs  to  return  a  result,  it  may  do  so  by 
using  the  'return'  keyword,  as  seen  in  the  example  above. 
In  the  above  example,  we  could  also  have  directly  returned 
'num'num'  instead  of  first  storing  it  in  a  variable. 

Datatypes: 

JavaScript  is  a  weakly  typed  language,  meaning  that  variables 
do  not  have  an  implicit  type  at  declaration.  When  you  create 
a  new  variable  its  type  depends  on  the  value  assigned  to  it. 
Conversion  between  types  is  also  quite  simple. 

JavaScript  has  support  for  strings,  dates,  arrays,  boolean 
values,  and  so  on,  natively.  JavaScript  also  natively  supports 
RegEx,  but  that  is  out  of  the  scope  of  this  book. 


4.4  DOM 

DOM  is  a  standard  that  specifies  how  a  browser  is  supposed  to 
represent  a  web  page  internally,  such  that  it  can  be  manipu- 
lated using  JavaScript.  When  we  use  JavaScript  to  change  the 
appearance  based  on  human  interaction,  DOM  defines  how 
we  expect  to  detect  the  interaction,  and  how  we  can  access 
and  change  the  attribute  of  the  document  such  that  its 
appearance  or  behaviour  is  changed. 

Since  DOM  is  a  general  term,  it  is  not  specific  to  HTML 
only,  but  any  document.  In  the  HTML  DOM,  the  main  docu- 
ment is  referred  to  using  the  object  'document',  and  this 
will  be  the  thing  we  will  use  the  most  when  working  with 
JavaScript  in  web  pages. 

To  manipulate  an  HTML  page,  we  need  to  do  three  things 
—  first,  we  need  to  find  the  element  /  part  of  the  page  that  we 
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wish  to  modify.  Second,  we  need  to  know  how  to  access  the 
property  that  we  wish  to  modify.  Finally,  we  need  to  know 
how  to  modify  it. 

This  may  seem  trivial  in  stating,  as  it  seems  fairly  obvious. 
However,  JavaScript  can  sometimes  be  slightly  counterintui- 
tive, as  it  has  been  used  as  a  playground  for  experimentation 
by  different  browsers  in  a  bid  for  market  share.  Also,  we  need 
to  be  able  to  trigger  this  change  based  on  some  event  that 
occurs.  For  example,  a  user  clicking  on  text. 

First,  one  of  the  easiest  ways  to  access  any  element  on  the 
page  is  using  it's  'id'  attribute,  'id'  is  similar  to  variable  names 
—  they  are  used  to  refer  to  an  element  in  particular,  and  are 
be  reused  or  repeated.  So  while  desigining  the  HTML  page,  we 
need  to  ensure  that  any  elements  we  wish  to  manipulate  have 
unique  ID's  assigned  to  them,  so  that  we  may  use  them  in  the 
JavaScript  code. 

The  'document'  object  contains  references  to  all  the  items 
that  are  part  of  the  HTML  page.  Using  the  'document'  object 
you  can  access  elements  in  the  following  ways: 

•  document.getElementById('element_id') 

This  method  will  return  a  reference  to  the  element  on  the 
page  which  has  an  id  of  'element_id'. 

•  document.getElementByName('element_name') 

This  method  will  return  an  array  of  elements  with  the 
name  'element_name' 

•  document.getElementByTagName('tag_name') 

This  method  will  return  an  array  of  all  the  tags  named 
'tag_name' 

Now  that  you  have  a  reference  to  the  object  or  objects 
you  wish  to  manipulate,  the  next  step  is  to  access  these 
properties.  Attributes  of  the  element  can  be  directly 
accesed  by  using  the  '.'  operator.  That  is,  to  change  the  color 
of  the  background  of  the  page,  you  would  set  the  objects 
'bgColor'  property  to  whatever  the  new  color  is  required 
to  be.  Styles  associated  with  the  element  can  be  changed 
using  the  'style'  property  of  the  object.  In  HTML,  use  lower 
case  for  all  tags  and  attributes,  while  in  JavaScript  we  use 
camelCase.  Also,  CSS  supports  using  the  hyphen  to  separate 
words  in  style  names.  However,  JavaScript  doesn't  support 
this  feature.  In  JavaScript,  the  hyphen  denotes  subtraction. 
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Therefore,  all  styles  and  attributes  are  to  be  converted  to 
camelCase  notations. 

Now  for  some  information  on  what  camelCase  is.  While 
programming  it  is  always  best,  to  provide  meaningful  names 
for  variables.  It  is  better  to  name  a  variable  denoting  simple 
interest  on  an  amount  as  'interest'  rather  than  'i\  It  is  even 
better  if  a  convention  is  adopted  for  naming  variables  such 
that  anyone  can  figure  out  what  each  variable  is  respon- 
sible for  storing  at  any  given  point.  There  are  many  vari- 
able naming  conventions  that  have  been  adopted  by  many 
different  organisations.  Some  of  the  popular  ways  are  (in 
case  of  multiple  word  variables),  to  have  words  separated 
by  underscores  ('_'),  or  by  capitalising  the  first  alphabet  of 
the  next  word.  Therefore,  if  you  wished  to  store  the  aver- 
age length  of  different  rivers,  you  could  name  the  variable 
as  'average_length_rivers'  by  the  first  convention  or  'aver- 
ageLengthRivers'  by  the  second.  The  second  convention  is 
known  as  the  camelCase  convention  because  it  resembles  a 
camel  with  a  hump. 

So  a  style  called  'background-color'  when  accessed 
through  JavaScript  will  have  to  be  done  as  'element. style. 
backgroundColor'.  So  now  you  can  get  to  an  element,  and 
access  it.  All  you  need  to  do  is  change  the  value.  Changing  is 
as  simple  as  assigning  a  new  value!  So  now  we  are  ready  to 
do  some  real  stuff! 


4.5  Learning  by  example 

Now  let's  get  to  the  fun  coding  part!  Here  we  will  work  with 
actual  code,  and  see  what  it  does.  The  best  way  to  learn  is  by 
example,  and  the  best  way  to  progress  it  to  play  with  things 
rather  than  work.  So  let's  play! 

We  will  now  go  back,  back  to  the  example  we  used  while 
learning  HTML.  And  here  it  is: 
<html> 

<heacl> 

<title>My  Favorite  Movies</title> 
</head> 
<body> 

<hl>A  List  of  my  favorite  Movies</hl> 
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<h2>Movie  Series :</h2> 
<ul> 

<li><a  href=".">The  Matrix  Series</a></ 


li> 


<li><a   href=".">The   Lord   of   the  Rings 
Series</aX/li> 

<lixa   href="  .  ">Star   Wars  Series</a></ 

li> 

</ul> 

<h2>Individual  Movies :</h2> 
<ul> 

<lixa  href="  .  ">Memento</aX/li> 
<lixa  href="  .  ">Batman  Begins</ax/li> 
<lixa  href=".">The  Dark  Knight</ax/li> 
<lixa  href="  .  ">Gattaca</a></li> 

<lixa   href="  .  ">Shawshank  Redemption</ 

ax/li> 

</ul> 
</body> 
</html> 


What  we  will  do  now  is  to  associate  an  ID  with  some  of  the 
elements  so  that  they  may  be  manipulated.  We  will  associate 
an  ID  of  'sermovies'  with  the  list  of  movie  series,  and  an  ID  of 
'indmovies'  with  the  individual  movies.  So  finally  it  should 
look  like  this: 
<html> 

<head> 

<title>My  Favorite  Movies</title> 
</head> 
<body> 

<hl>A  List  of  my  favorite  Movies</hl> 
<h2>Movie  Series :</h2> 
<ul  id=" sermovies "> 

<lixa  href=".">The  Matrix  Series</a></ 

li> 

<lixa   href=".">The   Lord   of   the  Rings 
Series</ax/li> 

<lixa   href="  .  ">Star   Wars  Series</a></ 

li> 
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</ul> 

<h2>Individual  Movies :</h2> 

<ul  id="indmovies"> 

<li><a  href=" . ">Memento</a></li> 
<li><a  href=" . ">Batman  Begins</a></li> 
<lixa  href=".">The  Dark  Knight</ax/li> 
<lixa  href="  .  ">Gattaca</a></li> 

<li><a   href =" . ">Shawshank  Redemption</ 

ax/li> 

</ul> 
</body> 
</html> 

Now  how  about  we  add  some  titles?  We  will  first  create  a 
function,  which  will  add  a  movie  to  the  movie  series  list.  Let's 
call  this  function  'addmovie'. 

Here  it  is: 

<script  language=" JavaScript"> 
<!  — 

function  addmovie () { 

document . getElementByld ( 'serraovies'  )  . 

innerHTML 

+=    VliXa   href=".">The    Terminator  Series</ 
ax/li>'  ; 
} 

— > 

</ script> 


We  place  this  in  the  head  segement  of  the  page. 

Now  what  we  need  to  do  is  call  this  function  as  a  result  of 
something  that  the  user  does.  For  this  example,  how  about  we 
call  it  whenever  the  user  clicks  on  the  heading  'Movie  series:'? 
To  do  this  we  will  just  add  an  attribute  'onclick="addmovie()"' 
to  the  <h2>  tag  containg  the  heading. 

So  finally  we  have: 
<html> 
<head> 

<title>My  Favorite  Movies</title> 
<script  language=" JavaScript"> 
<!  — 
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function  addmovie ( ) { 

document . getElementByld ( 'serraovies'  )  . 

innerHTML 

+=  '<li><a  href=".">The  Terminator  Series</a></ 
li>'  ; 

} 

—  > 
</ script> 
</head> 
<body> 

<hl>A  List  of  my  favorite  Movies</hl> 

<h2  onclick=" addmovie ( ) ">Movie  Series:</h2> 

<ul  id="sermovies"> 

<li><a  href=".">The  Matrix  Series</a></ 

li> 

<li><a   href=".">The   Lord   of   the  Rings 
Series</a></li> 

<li><a   href=" . ">Star   Wars  Series</a></ 

li> 

</ul> 

<h2>Individual  Movies :</h2> 

<ul  id="indmovies"> 

<li><a  href=" . ">Memento</a></li> 
<lixa  href="  .  ">Batman  Begins</ax/li> 
<lixa  href=".">The  Dark  Knight</ax/li> 
<lixa  href="  .  ">Gattaca</a></li> 

<li><a   href =" . ">Shawshank  Redemption</ 

ax/li> 

</ul> 
</body> 
</html> 


Now  when  you  click  on  the  heading,  you  will  see  "The 
Terminator  Series'  added  to  the  'Movie  Series'  list.  Every  time  you 
click  you  will  see  another  entry  added  to  the  list.  The  innerHTML 
property  represents  the  HTML  content  within  the  tag.  So  anything 
you  add  to  it,  will  go  inside  the  <ul>  tag.  This  is  a  very  useful  and 
powerful  way  of  adding  content  to  a  page,  and  is  quite  simple. 

Now  let's  make  it  a  little  more  dynamic.  Instead  of  adding 
the  same  entry  over  and  over  again,  we  will  add  a  counter. 
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Every  time  you  click,  a  new  numbered  entry  called  'Series  #' 
will  be  added,  where  #  is  the  series  no. 
Let's  see  how  this  is  done. 

Now,  what  we  added  was  a  new  variable  called  'len',  which 
will  store  the  current  no  of  items  in  the  list.  How  it  does 
that  is,  it  retrieves  the  'sermovies'  list  element,  from  which 
it  retrieves  an  array  all  the  <li>  tag  elements,  and  assigns 
the  length  of  that  to  'len'.  So  'len'  basically  has  the  number 
of  entries  in  the  list.  Now  we  increment  'len'  to  get  the  next 
entry's  number.  This  is  now  added  in  front  of  the  new  entry, 
which  is  then  appended  to  the  list. 

The  end  result  —  every  time  you  click  on  the  heading,  a 
new  series  keeps  getting  added  to  the  list.  They  will  come 
numbered  as  'Series  4',  'Series  5'  and  'Series  6'.  The  reason 
they  start  from  4  is  that  3  items  are  already  there  in  the  list, 
"The  Matrix  Series',  "The  Lord  of  the  Rings  Series'  and  'Star 
Wars  Series'. 

Surely,  this  is  more  dynamic  than  before,  but  still,  it 
is  essentially  useless!  Let  us  now  make  it  more  interactive 
by  allowing  a  user  to  enter  the  name  of  the  movie  series 
to  be  added. 

For  this  we  will  need  to  add  some  content  to  the  HTML 
page,  some  kind  of  form  where  they  can  enter  a  movie  name. 
Let  us  place  a  text  input  box  under  the  movie  series  list  for  the 
purpose,  and  add  a  button  to  add  a  name  to  the  list.  Here  is 
the  final  HTML  code  for  that: 
<html> 

<head> 

<title>My  Favorite  Movies</title> 
<script  language=" JavaScript"> 
<!  — 

function  addmovie ( ) { 

movieName  =  document . getElementByld ( 
'newseries' ) .value; 

document . getElementByld ( 'newseries' ) .value  = 

document . getElementByld ( 'sermovies' ) . 
innerHTML  +=    VliXa  href="  .  ">' 
+  movieName  + 
,</a></li>'  ; 
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</ script> 


—  > 


T 
R 
A 
C 
K 


</head> 


<body> 

<hl>A  List  of  my  favorite  Movies</hl> 
<h2>Movie  Series :</h2> 
<ul  id="sermovies"> 


<li><a  href=".">The  Matrix  Series</a></ 


T 
0 


li> 


<li><a   href=".">The   Lord   of   the  Rings 


A 
J 

A 

X 


Series</a></li> 


<li><a   href=" . ">Star   Wars  Series</a></ 


li> 

</ul> 


<input  id="newseries"  type="text"  /xinput 
type="button"  onclick="addmovie ( ) "  value="Add 
Series"  /> 

<h2>Individual  Movies :</h2> 
<ul  id="indmovies"> 

<li><a  href=" . ">Memento</a></li> 
<lixa  href="  .  ">Batman  Begins</ax/li> 
<lixa  href=".">The  Dark  Knight</ax/li> 
<lixa  href="  .  ">Gattaca</a></li> 

<li><a   href =" . ">Shawshank  Redemption</ 

ax/li> 

</ul> 
</body> 
</html> 

Now  let's  see  what  we've  done  here.  First,  we've  added  two 
new  <input>  tags  below  the  first  list.  One  is  of  type  'text',  and 
the  other  'button'. 

The  <input>  tag  of  type  'text'  is  a  text  input  box,  where 
the  user  may  type  the  name  of  the  movie.  It  has  been  given 
an  ID  of  'newseries',  so  that  its  value  can  easily  be  used  in 
JavaScript  later  on. 

The  <input>  tag  of  type  'button'  is  well,  a  button!  It  has 
an  'onclick'  property  set  to  'addmovieQ',  so  that  when  the  user 
clicks  on  the  button,  the  'addmovie'  function  is  called.  It  also 
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has  an  attribute  'value',  set  to  'Add  Series',  this  is  the  label 
that  will  appear  on  the  button. 

The  addmovie  function  itself  has  been  modified  to  accom- 
modate this  change.  The  changes  made  to  the  function  are: 

•  A  new  variable  called  'movieName'  is  now  added  and  set  to 
the  value  of  the  textbox  with  an  'id'  of 'newseries',  in  the 
line:  movieName  =  document . getElementByld ( 'news 
eries') .value; 

•  The  value  of  the  textbox  is  being  cleared  by  setting  it  to 
an  empty  string.  This  way  the  user  can  start  typing  a  new 
name  immediately.  We  do  this  using:  document .  getEle 
mentByld ( 'newseries' ) .value  =   " ; 

•  The  value  being  set  for  each  new  entry  to  the  list  is  set  to 
the  value  entered  in  the  textbox.  This  is  done  by  modify- 
ing the  old  code  which  would  just  add  a  number  after  the 
string  'Series  '  to:  document .  getElementByld  ( 1  sermov 
ies' ) . innerHTML  +=  '<lixa  href=" . ">'  +  movi- 
eName +    ,</a></li>' ; 

•  The  old  code  to  calculate  the  number  of  items  in  the  list 
has  been  removed. 

If  you  run  it  now  you  will  see  that  the  value  you  enter  in 
the  textbox  is  added  to  the  list  when  you  click  the  button. 

Now  let's  play  around  a  little  more.  We  will  now  add 
another  set  of  textbox  and  button  to  enter  movies  in  the  indi- 
vidual movies  list. 

Also  the  function  'addmovie'  is  too  restricted,  as  it  will 
only  add  movies  to  the  'Movie  Series'  list.  We  will  now  give 
it  some  parameters  so  that  it  can  work  with  both  cases,  and 
infact  can  be  used  any  any  new  list  we  might  add. 

Here  is  the  new  proposed  function: 

<script  language=" JavaScript"> 

<!  — 

function  addmovie (nameid,    listid) { 
movieName   =   document . getElementByld (nameid) . 
value; 

document . getElementByld (nameid) . value  =   ' '; 
document . getElementByld (listid) .innerHTML  += 
Vlixa  href=".">' 

+  movieName  +   ,</a></li>'  ; 
} 
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— > 

</ script> 

The  function  now  supports  two  parameters  —  one  for  the 
textbox  to  get  the  movie  name,  and  the  other  is  the  ID  of  the 
list  to  which  it  is  to  be  added. 

Now  to  the  HTML  code  we  will  add  another  textbox  and 
button  below  the  movie  list.  Also,  now  we  have  to  update  the 
'onclick'  attribute  of  the  button  so  that  it  uses  the  function 
'addmovie'  with  its  new  syntax. 

Finally  we  get  this: 

<html> 
<head> 

<title>My  Favorite  Movies</title> 
<script  language=" JavaScript"> 
<!  — 

function  addmovie (nameid,    listid) { 

movieName     =  document. 
getElementByld (nameid) .value; 

document . getElementByld (nameid) . 

value  =   ' ' ; 

document . getElementByld (listid)  . 
innerHTML  +=  '<liXa  href=".">'  +  movieName  + 
,</a></li>' ; 


</ script> 
</head> 
<body> 

<hl>A  List  of  my  favorite  Movies</hl> 
<h2>Movie  Series :</h2> 
<ul  id="sermovies"> 

<li><a   href=".">The   Matrix  Series</ 

a></li> 

<li><a  href=".">The  Lord  of  the  Rings 
Series</a></li> 

<lixa  href="  .  ">Star  Wars  Series</a></ 

li> 

</ul> 

<input  id="newseries"  type="text"  /> 
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<input  type="button"  onclick="addmovie ( 'n 
ewseries' , ' sermovies' ) "  value="Add  Series"  /> 
<h2>Individual  Movies :</h2> 
<ul  id="indmovies"> 

<li><a  href=" . ">Memento</a></li> 
<li><a  href=" . ">Batman  Begins</a></li> 
<lixa  href=".">The  Dark  Knight</a></ 

li> 

<lixa  href="  .  ">Gattaca</a></li> 
<li><a  href =" . ">Shawshank  Redemption</ 

ax/li> 

</ul> 

<input  id="newmovie"  type="text"  /> 
<input  type="button"  onclick="addmovie ( 'n 
ewmovie' , ' indmovies' ) "  value="Add  Movie"  /> 
</body> 
</html> 


You  should  pretty  much  have  a  grasp  on  basic  JavaScript 
by  now  and  discover  just  how  much  you  can  change.  However, 
just  play  around  just  a  little  bit  more  with  this  before  giving 
up  on  it. 

The  next  change  we  will  make  will  be  to  remove  one  of  the 
textbox  and  use  the  other  for  adding  entries  to  both  the  lists. 
We  will  also  modify  the  function  as  it  now  needs  only  one 
parameter,  the  ID  of  the  list  in  which  to  add  the  entry. 

We  won't  go  into  how  it  works,  you  will  probably  be  able  to 
understand  that  by  yourself  by  now.  Here  is  what  we  get: 

<html> 
<head> 

<title>My  Favorite  Movies</title> 
<script  language=" JavaScript"> 
<!  — 

function  addmovie (listid) { 

movieName  =  document . getElementByl 
d( 'newmovie'  )  .value; 

document . getElementBy Id ( 'newmovie'  )  . 

value  =   1 ' ; 

document . getElementByld (listid) . 
innerHTML  +=    VliXa  href=".">' 
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+  movieName  + 
,</a></li>'  ; 
} 

—  > 
</ script> 
</head> 
<body> 

<hl>A  List  of  my  favorite  Movies</hl> 
<h2>Movie  Series :</h2> 
<ul  id="sermovies"> 

<li><a   href=".">The   Matrix  Series</ 

a></li> 

<li><a  href=".">The  Lord  of  the  Rings 
Series</ax/li> 

<lixa  href="  .  ">Star  Wars  Series</a></ 

li> 

</ul> 

<h2>Individual  Movies :</h2> 

<ul  id="indmovies"> 

<lixa  href="  .  ">Memento</a></li> 
<lixa  href="  .  ">Batman  Begins</ax/li> 
<lixa  href=".">The  Dark  Knight</a></ 

li> 

<lixa  href="  .  ">Gattaca</a></li> 
<li><a  href =" . ">Shawshank  Redemption</ 

ax/li> 

</ul> 

<input  id="newmovie"  type="text"  /> 
<input   type="button"   onclick="addmovie (  1 
indmovies' ) "  value="Add  Movie"  /> 

<input   type="button"   onclick="addmovie ( 1 
sermovies' ) "  value="Add  Series"  /> 
</body> 
</html> 

Now,  instead  of  having  two  text  input  boxes  for  two  differ- 
ent lists,  we  have  one  textbox,  the  contents  which  are  added 
to  different  lists  depending  on  the  button  clicked. 

Just  to  show  you  how  we  can  control  styles  in  JavaScript, 
we  will  add  a  quite  common  feature  found  on  many  sites,  a 
collapsible  panel.  In  a  collapsible  panel,  when  you  click  on  the 
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title  of  a  widget,  it  hides  the  rest  of  the  content.  Like  the  chat 
windows  which  appear  in  Gmail,  they  can  be  minimised,  or 
'collapsed'  to  show  just  the  name  of  the  person  you  are  chat- 
ting with. 

In  the  next  example,  what  we'll  do  is  add  a  function  to  collapse 
a  list,  with  a  parameter  which  asks  for  which  list  to  collapse.  We 
will  call  this  function  whenever  someone  clicks  on  the  headings. 

Here  is  what  we  get: 

<html> 
<head> 

<title>My  Favorite  Movies</title> 
<link   rel="stylesheet"    href="new  file. 

css"> 

<script  language=" JavaScript"> 
<!  — 

function  addmovie ( listid) { 

movieName  =  document . getElementByl 
d( 'newmovie' ) .value; 

document . getElementBy Id ( 'newmovie' ) . 

value  =   ' ' ; 

document . getElementByld (listid) . 
innerHTML  +=    '<li><a  href=" . ">' 
+  movieName  + 
,</a></li>'  ; 
} 

function  collapse (listid) { 

listObject     =  document. 

getElementByld (listid)  ; 

if    ( listObj ect . style . display  = 

'none' )  { 

listObject . style . display  = 

\  r  . 

} 

else  { 

listObject . style . display  = 

'none' ; 

} 

} 

—  > 
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</ script> 
</head> 
<body> 

<hl>A  List  of  my  favorite  Movies</hl> 
<h2  onclick="collapse ( 'sermovies' ) ">Movie 
Series :</h2> 

<ul  id="sermovies"> 

<li><a   href =" . ">The   Matrix  Series</ 

a></li> 

<li><a  href=".">The  Lord  of  the  Rings 
Series</a></li> 

<lixa  href="  .  ">Star  Wars  Series</ax/li> 
</ul> 

<h2  onclick="collapse ( 'indmovies'  ) ">Indi 
vidual  Movies :</h2> 

<ul  id="indmovies"> 

<lixa  href="  .  ">Memento</a></li> 
<lixa  href="  .  ">Batman  Begins</ax/li> 

<lixa  href=".">The  Dark  Knight</ax/li> 
<lixa  href="  .  ">Gattaca</a></li> 
<li><a  href =" . ">Shawshank  Redemption</ 

ax/li> 

</ul> 

<input  id="newmovie"  type="text"  /> 
<input   type="button"   onclick="addmovie ( ' 
indmovies' ) "  value="Add  Movie"  /> 

<input   type="button"   onclick="addmovie ( ' 
sermovies' ) "  value="Add  Series"  /> 
</body> 
</html> 

In  this  example,  you  can  expand  or  collapse  the  lists  by  click- 
ing on  their  respective  headers.  This  is  done  by  toggling  the  value 
of  their  'display'  style  between  'none'  and  the  default  value. 

These  are  the  basics  of  JavaScript.  The  different  options 
available  to  you  when  working  with  the  different  elements 
on  the  page  are  just  too  many  to  enumerate  or  remember.  By 
using  a  reference  source  for  such  things,  you  already  create 
wonderful  JavaScript  applications.  Next  we  will  begin  with 
Ajax.  Since  it  is  just  a  way  of  using  JavaScript,  it  will  merely  be 
a  deeper  look  into  some  of  JavaScript's  functionality. 
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5.1  The  spirit  of  AJAX 


The  basic  spirit  of  AJAX  is  in  making  best  use  of  technolo- 
gies we  already  have,  to  make  the  web  more  responsive  and 
interactive.  All  you  need  is  a  browser  with  JavaScript  support 
which  is  essentially  every  browser  out  there.  Unless  someone 
has  disabled  JavaScript  or  is  using  a  really  old  browser,  you 
can  be  sure  that  your  web  site  will  work.  However,  this  doesn't 
mean  web  sites  no  longer  need  to  work  towards  ensuring  com- 
patibility with  all  browsers. 

The  internet  is  no  longer  a  web  of  documents.  It  has  now 
become  an  environment  of  inter-connected  services  .Your  work 
is  now  independent  of  your  desktop  environment.  Whether 
you're  using  Linux,  Windows,  or  any  other  OS,  all  you  need  is 
a  modern  browser,  and  you  can  do  the  rest  online. 

Not  convinced?  Let's  see,  what  all  you  can  do  online  these 
days: 

Store  documents  and  files  at:  box.net,  DropBoks,  acrobat.com, 
Google  Docs,  etc. 

Edit  Documents  at:  Google  Docs,  buzzword,  zoho.com,  etc. 
Store  images  at:  Flickr,  Photobucket,  Picasa  Web  Albums,  etc. 
Edit  Images  at:  photoshop.com,  picnik.com,  etc. 
The  list  goes  on... 

If  you  search  online  you  will  quickly  find  an  online 
replacement  for  almost  everything  you  do  offline.  In  fact 
these  services  are  now  open  in  such  a  way,  that  you  can  store 
your  documents  at  box.net  and  open  them  at  zoho.com  without 
downloading  them!  Or  store  images  at  Picasa  or  Flickr  and 
edit  them  using  photoshop.com. 

Today,  entire  operating  systems  are  available  online,  for 
example  GlideOS  and  eyeOS.  These  are  online  environments 
which  allow  you  to  do  virtually  everything,  online.  Instead 
of  making  your  computer  more  and  more  portable,  you  can 
just  make  your  environment  more  and  more  portable.  No  pen 
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drives,  no  laptops,  the  only  thing  you  need  wherever  you  go  is 
the  internet,  and  you  can  start  working. 

Guess  what  each  and  every  one  of  them  has  in  common? 
AJAX!  AJAX  in  a  way,  is  the  spirit  of  the  web. 

Often  times  you  will  notice  that  some  AJAX-based  web 
sites  take  a  long  time  to  load,  and  this  has  been  often  cited  as 
a  big  flaw,  however  the  fact  is  that  once  the  web  site  loads,  it 
covers  up  for  lost  time  pretty  quick.  If  you  use  Gmail,  try  com- 
paring its  working  in  'Standard'  mode  and  'basic  HTML'  mode. 
You  will  realise  that  although  it  loads  much  faster  in  'basic 
HTML'  mode,  it  takes  much  longer  to  open  an  email,  switch 
folders  etc  as  the  page  is  refreshed  every  time.  Functionality 
such  as  chatting  in  the  browser,  Web  Clips  etc.  are  also  not 
available.  The  interface  itself  seems  like  a  dull  reminder  of 
archaic  times. 


5.2  Starting  AJAX  coding 

Since  AJAX  isn't  really  a  language,  there  is  no  such  thing 
as  pure  AJAX  code.  As  such  what  we  will  learn  now  will  be 
JavaScript  code  which  uses  the  principles  of  AJAX. 

You  have  learnt  JavaScript,  HTML,  and  XML  in  the  previ- 
ous sections,  and  here  we  will  use  all  three.  So  if  you  tried 
to  cheat  by  skipping  straight  to  the  juicy  AJAXy  bits  of  this 
book,  beware!  There  is  little  chance  you  will  learn  anything 
here  if  you  aren't  already  acquainted  with  those  topics.  Turn 
back  now. 

One  of  the  features  that  is  most  used  in  AJAX  is  the 
XMLHttpRequest  object,  so  let  us  begin  with  that. 
XMLHttpRequest  is  a  JavaScript  object  that  allows  you  to 
load  data  from  a  server  at  any  time.  Using  XMLHttpRequest, 
you  can  be  in  control  of  when  the  data  of  the  page  is  loaded 
instead  of  waiting  for  a  user  to  click  on  a  link.  You  can  create 
an  XMLHttpRequest  object  at  any  time,  and  use  it  to  initiate 
a  connection  to  a  remote  server.  You  can  then  load  data  from 
this  server,  and  using  JavaScript  place  it  on  your  page  after  it 
has  loaded. 

The  first  hurdle  we  encounter  while  using  XMLHttpRequest 
is  browser  compatibility.  Quite  a  few  people  out  there  are  still 
using  older  versions  of  Internet  Explorer  which  require  a  spe- 
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cial  way  of  creating  the  XMLHttpRequest.  You  can  see  how  to 
detect  the  browser,  and  create  the  XMLHttpRequest  object  in 
the  code  example. 

function  createAJAXObject ( )  { 
var  httpReq; 
try  { 

httpReq  =  new  XMLHttpRequest ()  ; 


catch   (e)  { 
try  { 
httpReq 
XMLHTTP" ) ; 
} 

catch  (e)  { 
try  { 

httpReq  = 
XMLHTTP" ) ; 


ActiveXObj ect ("Msxml2 . 


new     ActiveXObj ect ( "Microsoft . 


catch  (e) 
return 


} 


false; 


} 

In  this  example,  we  are  using  the  try.. .catch  mechanism  to 
create  an  AJAX  object.  The  catch  clause  is  executed  if  there  is  an 
error  in  the  first  attempt.  Then  it  tries  to  create  the  object  using 
ActiveX,  as  used  by  older  versions  of  IE.  If  all  else  fails,  it  returns 
false  indicating  that  AJAX  will  not  work  on  the  browser. 

Now  let  us  really  get  started,  we  will  now  develop  a  movie 
database,  you  can  download  the  sample  data  from  the  Digit  web 
site,  or  create  your  own.  The  sample  data  contains  a  list  of  the  top 
100  earning  movies.  The  data  is  out  of  date;  however  it  is  suitable 
for  our  purposes.  Download  and  play  the  file  in  the  same  direc- 
tory as  the  one  in  which  you  place  the  HTML  file  you  create. 

To  truly  make  this  an  AJAX  application,  we  will  have  to  do 
the  following: 

•  Load  an  external  XML  file  containing  the  data 

•  Create  an  HTML  representation  of  the  data 

•  Place  it  in  the  desired  location  in  the  document 
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Before  proceeding  with  the  JavaScript  code,  let  us  first 
create  the  basic  structure  of  the  HTML  document  that  will 
contain  our  application.  We  will  have  a  simple  HTML  page 
with  a  single  table  with  three  columns  —  one  column  for  the 
movie's  rank,  another  for  the  movie's  name,  and  the  last  for 
its  earning. 
<html> 

<head> 

<title>My  AJAX  App</title> 
</head> 

<body> 

<table  width="500"  border="l"  id="movies"> 

<tr> 

<th  scope="col">Rank</th> 


<th  scope="col">Name</th> 


<th  scope="col">Earning</th> 
</tr> 
</table> 
</body> 
</html> 


When  you  open  this  in  the  browser,  it  will  appear  as  a 
table  with  three  cells,  for  the  titles  of  each  column.  Here  you 
are  presented  with  some,  perhaps,  unfamiliar  HTML  tags.  The 
<th>  tag  is  for  table  headers,  and  its  scope  attribute  defines 
that  it  is  a  header  for  a  column.  Here,  we  could  have  just 
used  normal  <td>  cells,  but  since  HTML  provides  a  facility 
to  demarcate  the  purpose  of  the  data,  it  is  best  to  use  it.  It 
can  also  be  beneficial  to  search  engines  and  while  applying 
styles. 

In  our  first  example,  we  will  just  make  the  application  load 
the  XML  data,  and  add  it  on  the  page  as  entries  in  the  table. 
The  length  and  complexity  of  the  code  may  come  as  a  shock; 
however  keep  in  mind  that  we  are  starting  of  with  a  fairly 
complicated  example.  It  will  also  make  much  more  sense  once 
we  go  through  how  it  works,  and  what's  going  on. 
<html> 


56 


EEffl  FAST  TRACK 


www.thinkdigit.com 


<head> 

<title>My  AJAX  App</title> 
<script  type="text/ j avascript"> 
<!  — 

var  dataLoader; 
var  data; 

function  createAJAXObj ect ( )  { 
var  httpReq; 
try  { 

httpReq  =  new  XMLHttpRequest ( ) ; 
} 

catch   (e)  { 
try  { 

httpReq  =  new  ActiveXObj ect ( "Msxml2 . XMLHTTP" ) ; 

} 

catch   (e)  { 
try  { 

httpReq  =  new 
ActiveXObject ("Microsoft . XMLHTTP" ) ; 

} 

catch    (e)  { 

return  false; 

} 

} 

} 

return  httpReq; 


function  loadData ( ) { 

dataLoader  =  createAJAXObj ect () ; 

dataLoader . onreadystatechange 

=  onDataLoad; 

dataLoader . open ( 'GET' ,  'movies. 

xml'  ,   true) ; 

dataLoader . send (null)  ; 

} 


function  onDataLoad () { 

if    (dataLoader . readyState   !=  4) 


BED  FAST  TRACK 


57 


www.thinkdigit.com 


return; 

if    (dataLoader . status    !=  200  && 
dataLoader . status   !=  0) 

return; 

data  =  dataLoader . responseXML. 
documentElement . getElementsByTagName ( 'movie' ) ; 

movietable  =  document . getEleme 

ntByld ( 'movies' ) ; 

for    (i  =  0;    i  <  data. length;    i++)  { 
newrow  =  movietable . insertRow (-1 ) ; 

newrow. insertCell (-1) .innerHTML  = 
data  [  i ]  . getElementsByTagName ( 'rank'  )  [ 0 ]  .text- 
Content; 

newrow. insertCell (-1 ) .innerHTML  = 
data  [ i ]  . getElementsByTagName ( 'name' )  [ 0 ]  . text- 
Content; 

newrow . insertCell (-1 ) .innerHTML  = 
data  [  i ]  . getElementsByTagName ( 'earning' )  [0]  . 
textContent; 

} 

} 

— > 

</script> 

</head> 

<body  onload="loadData ( )  "> 

<table    width="500"  border="l" 

id="movies"> 

<tr> 

<th  scope="col">Rank</th> 
<th  scope="col">Name</th> 
<th  scope="col">Earning</th> 
</tr> 
</table> 
</body> 
</html> 
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1 

600788188 

2 

STAR  WARS  (1977) 

460988007 

3 

Star  AVars;  Episode  I:  Tlis-  Phantom  Menace 

431088295 

4 

E.T.  THE  EXTRA-  TERRE  S  TRIAL  <  1982) 

399804539 

== 

FORREST  GUMP  (1994) 

329694499 

7 

312855561 

s 

Return,  of  tiie  Jedi 

309153948  1 

9 

306169255 

10 

Skill  Sense  The  

293501675 

11 

Empire  Strips  Back  The  

290266497 

12 

Home  Alone 

285761243 

13 

JAWS  (1975) 

260000000 

14 

Batman 

251188924 

15 

Men  in  B  lack 

250690539 

16 

Tov  Story  2 

245823397 

17 

RAIDERS  OF  THE  LOST  ARK  {1981) 

24503435S 

IS 

243708908 

19 

Ghostbusters 

238600000 

20 

234"604"S 

Your  first  AJAX 


When  you  run 
this  in  the  browser, 
you  will  notice  a  list 
of  100  movies  in  the 
table.  You  can  tell 
that  these  have  been 
added  dynamically 
from  the  XML  file, 
since  they  weren't 
in  the  document  to 
begin  with.  If  you 
don't  see  any  data, 
make  sure  you  down- 
loaded the  sample 
XML  file  from  the 
ThinkDigit  web  site, 
and  placed  it  in  the 
same  directory.  The 
file  should  be  called  'movies. xml'.  Feel  free  to  examine  the 
XML  file  in  any  text  editor,  you  will  be  able  to  see  how  the 
data  is  stored  in  it,  and  can  add  your  own  entries  or  modify 
the  ones  already  there. 

Take  a  look  at  the  XML  file  so  you  know  what  it  contains; 
only  the  first  three  entries  are  shown  here  as  the  complete 
file  is  quite  large. 
<movies> 

<movie> 

<rank>K/rank> 
<name>Titanic</ name> 
<earning>6007  88188</earning> 

</movie> 

<movie> 

<rank>2</rank> 

<name>STAR  WARS    ( 1977 ) </name> 
<earning>4  60988007</earning> 

</movie> 

<movie> 

<rank>3</rank> 

<name>Star    Wars:    Episode    I:  The 
Phantom  Menace</name> 
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<earning>4310882  95</earning> 
</movie> 
<movie> 

<rank>4</ rank> 

<name>E.T.      THE  EXTRA-TERRESTRIAL 

(1982) </name> 

<earning>399804  539</earning> 
</movie> 
</movies> 

The  code  seems  complicated  doesn't  it?  To  make  it  simpler 
let's  focus  on  what  needed  to  be  done  and  how  it  was  done. 

First,  we  need  to  load  the  external  XML  document  contain- 
ing the  data.  In  this  case,  we  make  the  data  load  when  the  page 
loads,  using  the  'onload'  event  of  the  <body>  tag.  To  load  the 
data,  we  first  need  to  create  an  XMLHttpRequest  object,  which 
we  create  using  the  'createAJAXObject'  function  described  ear- 
lier. To  actually  use  the  object,  we  need  to  do  the  following: 

•  We  need  to  provide  a  function  that  will  be  called  when 
the  data  finishes  loading,  or  fails  to  load.  We  do  this 
by  setting  the  'onreadystatechange'  property  of  the 
XMLHttpRequest  object  to  a  function  which  will  handle 
the  data,  or  error  in  loading. 

•  We  need  to  supply  the  target  file  to  load,  and  the  mode 
in  which  it  is  to  be  loaded.  This  is  done  by  calling  the 
'open'  function  of  the  XMLHttpRequest  object.  The 
function  takes  three  parameters.  The  first  is  the  mode, 
usually  this  will  be  'GET',  to  retrieve  data  from  a  loca- 
tion. The  second  parameter  specifies  the  path  of  the 
file  to  be  loaded,  in  this  case  'movies.xml',  as  the  file 
is  in  the  same  directory  as  the  HTML  file.  The  final 
parameter  is  specifies  whether  we  wish  to  load  the  data 
asynchronously.  Loading  synchronously  means  that  the 
execution  of  the  code  will  stop  till  the  entire  document 
located  at  the  remote  site  has  downloaded,  and  with 
asynchronous  loading,  the  data  will  load  in  the  back 
while  the  file  continues  executing.  We  wish  to  use  it 
asynchronously,  so  we  set  it  to  true. 

•  Finally,  we  inject  this  data  into  our  page  as  done  in  the 
'onDataLoad'  function. 
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The  'onDataLoad'  function  deserves  an  explanation  owing 
to  its  complexity.  Let  us  look  at  it  step  by  step: 

•  if    (dataLoader . readyState   !=  4) 
return; 

This  code  is  responsible  for  checking  if  the  data  has  fin- 
ished loading.  A  ready  state  of  4  indicates  that  the  request 
is  complete. 

•  if    (dataLoader . status    !=   200    &&  dataLoader. 
status   !=  0) 

return; 

This  code  checks  whether  the  data  loaded  successfully.  A 
status  of  200  means  that  the  data  was  loaded  successfully. 
However  status  messages  are  not  sent  when  loading  a  local 
file,  such  as  we  are  using,  and  the  example  can  fail  to 
work,  so  we  need  to  add  a  check  for  a  status  of  '0'  too.  The 
statement  inside  the  brackets  after  'if  is  a  check  for  status 
NOT  equal  to  '200'  AND  status  NOT  equal  to  0.  That  is  to 
say  it  should  be  neither  '200'  nor  '0',  or  else  the  function 
will  'return'  without  doing  anything. 

•  data     =     dataLoader . responseXML . documentEle- 
ment . getElementsByTagName ( 'movie'  ) ; 

Here  we  assign  the  list  of  movie  elements  in  the  loaded 
document  to  a  variable  called  'data'. 

•  movietable  =  document . getElementByld ( 'movies' 
)  ; 

Here  we  assign  a  reference  to  the  table  containing  the 
movie  list  to  movietable,  so  that  it  may  be  conveniently 
used,  or  called. 

•  for    (i  =0;    i  <  data. length;   i++)  { 

This  loop  will  run  for  all  the  items  in  the  XML  data 
source. 

•  newrow  =  movietable . insertRow (-1 ) ; 

This  will  add  a  new  row  into  the  movie  table,  and  put 
a  reference  to  the  newly  created  row  in  the  variable 
'newrow'. 

•  newrow . insertCell (-1 ). innerHTML      =  data[i]. 
getElementsByTagName ( 'rank' ) [0] .textContent; 
newrow . insertCell (-1 ). innerHTML     =  data[i]. 
getElementsByTagName ( 'name' ) [0] .textContent; 
newrow. insertCell (-1 ). innerHTML  =  data[i].get 
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ElementsByTagName ( 'earning' ) [0] . textContent; 
These  three  lines  add  the  values  for  the  three  columns. 
They  work  in  the  same  manner,  so  let  us  look  at  only  the 
first.  Here  'data[i]'  refers  to  the  i-th  element  of  data  in 
the  data  source.  The  getElementsByTagName  function 
is  used  on  the  i-th  data  element,  to  retrieve  a  list  of  ele- 
ments in  that  node  which  are  of  the  type  'rank'.  Since 
there  will  be  only  one,  we  use  the  0-th  element,  which 
will  give  us  the  node  containing  the  rank  of  the  movie. 
We  then  retrieve  the  contents  of  the  tag,  which  is  then 
assigned  to  a  newly  inserted  cell  in  the  table  using  the 
innerHTML  property. 
Now  that  you've  been  introduced  to  the  developer  side  of 
things,  let's  look  behind  the  scenes.  How  does  this  applica- 
tion flow? 

•  The  browser  loads  the  main  HTML  page 

•  The  browser  calls  the  JavaScript  function  ToadData' 

•  The  browser  sends  a  request  to  load  'movies.xml' 

•  The  browser  calls  the  function  'onDataLoad'  every  time 
the  status  of  its  request  for  movies.xml  changes,  i.e.  when 
the  request  is  initiated,  when  the  request  is  sent,  when  it 
is  processed,  and  finally  when  the  request  is  complete. 

•  When  the  status  becomes  '4',  implying  that  the  request  is 
complete  and  loaded,  the  browser  starts  executing  the  rest 
of  the  'onDataLoad'  function. 

•  The  'onDataLoad'  function  iterates  over  each  data  entry 
from  the  XML  file  and  adds  them  to  the  page  in  the 
table. 

That  should  cover  it.  We  hope  you've  grasped  the  concept 
of  what  is  going  on  in  this  example.  If  you  are  in  doubt,  go 
through  it  again,  it  will  greatly  help  in  understanding  what's 
to  come. 


5.3  Further  down  the  AJAX  road 

In  this  section,  we  will  continue  with  the  AJAX  application  we 
created  above,  and  continually  improve  on  it,  making  it  into 
a  true  database. 

The  application  we  constructed  before  was  a  fair  example, 
but  it's  quite  static.  Looking  at  it,  one  cannot  discern  it  from  a 
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normal  HTML  file  already  containing  the  data.  So  now  we  will 
get  to  the  part  where  we  can  truly  see  the  advantages  of  AJAX. 

In  this  step,  we  will  add  pagination,  which  is  to  divide  the 
data  into  pages,  and  display  one  at  a  time.  To  do  this,  we  need 
to  control  the  loop  that  adds  data  to  the  page,  and  rather  dis- 
play a  subset  of  the  whole  data.  Also,  we  need  to  clear  the  old 
data  before  adding  new  data. 

We  also  need  to  add  a  navigation  menu  so  the  user  can  go 
to  any  page  he  wants,  and  we  need  to  add  functions  to  sup- 
port this. 

Let  us  first  calculate  and  store  some  of  the  data  that  will 
later  be  repeatedly  used.  For  example,  the  number  of  data 
items,  items  per  page,  and  number  of  pages. 

For  this,  we  will  add  variables  to  our  script  outside  of  any 
function,  so  that  they  may  be  accessible  by  all  functions. 

var  dataLoader ; 

var  data; 

var  dataLength  =  0; 
var  itemsPerPage  =  10; 
var  noOf Pages  =  0; 
var  movieTable; 

The  names  of  the  variables  make  their  purpose  quite  clear, 
it  involves  more  typing,  but  you  can  come  back  years  later  and 
still  understand  what  you  did.  Note  that  we  have  set  the  value 
of  'itemsPerPage'  to  10,  we  can  set  this  to  any  value,  but  for 
now  this  is  a  reasonable  amount. 

We  will  also  now  split  the  'onDataLoadFunction'  and  put 
the  code  that  adds  data  on  the  page  to  a  separate  function. 
The  'onDataLoadFunction'  will  now  just  be  responsible  for  ini- 
tialising the  data.  It  will  calculate  and  store  the  length  of  the 
data  and  the  number  of  pages  into  their  respective  variables, 
after  which  it  will  call  the  new  function  'displayPage'  to  actu- 
ally add  the  data  to  the  page. 

function  onDataLoad ( ) { 

if    (dataLoader . readyState   !=  4) 
return; 

if    (dataLoader . status    !=  200   &&  dataLo- 
ader. status    !=  0) 
return; 

data   =   dataLoader . responseXML . documen- 
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tElement . getElementsByTagName ( 'movie' ) ; 

movieTable   =  document . getElementByld ( 'm 

ovies' ) ; 

dataLength  =  data. length; 

noOf Pages  =  data. length  /  itemsPerPage; 

displayPage (0) ; 

The  function  is  quite  simple;  the  only  new  thing  it  does  is 
set  'dataLength'  to  the  number  of  items  in  the  XML  database. 
It  also  calculates  the  number  of  pages  of  data  by  dividing  the 
number  of  items  of  data  by  the  items  to  be  shown  on  each 
page.  It  calls  the  'displayPage'  function  with  a  parameter  of 
'0',  basically  telling  it  to  display  the  first  page. 

The  'displayPage'  function  is  just  a  modified  second- 
half  of  the  original  'onDataLoad'  function.  Instead  of  dis- 
playing the  whole  list,  it  calculates  the  starting  and  ending 
positions  of  the  items  on  the  supplied  page  number,  and 
displays  only  those. 

Another  thing  required  of  this  function  is  to  clear  out  old 
data.  We  do  that  by  repetitively  deleting  the  second  row  of 
the  table  (index  1)  till  there  is  only  one  row  left,  which  is  the 
header.  As  you  may  have  guessed  this  is  done  using  the  while 
loop  in  the  code  example.  It  keeps  deleting  the  second  row 
('movieTable.deleteRow(l)')  as  long  as  the  no.  of  rows  ('moviet- 
able.rows.length')  is  more  than  one. 

function  displayPage (pagenum) { 


startltem  =  pagenum*itemsPerPage; 
endltem  =  startltem  +  itemsPerPage; 

while (  movieTable . rows . length  >1  ) 
movieTable . deleteRow ( 1 ) ; 


for    (i  =  startltem;    i  <  endltem;    i++)  { 
newrow  =  movieTable . insertRow (-1 )  ; 
newrow . insertCell (-1 ) . innerHTML  = 
data  [  i ]  . getElementsByTagName ( 'rank'  )  [ 0 ]  .text- 
Content; 

newrow . insertCell (-1 ) .innerHTML  = 
data  [ i ]  . getElementsByTagName ( 'name' )  [ 0 ]  . text- 
Content; 
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newrow . insertCell (-1 ) . innerHTML 
=  datafi] . getElementsByTagName ( 'earning' ) [0] . 
textContent; 


With  these  modifications  alone,  your  page  will  display 
the  first  page  on  loading,  which  will  list  the  movies  ranked 
from  1  to  10. 

Let  us  now  add  a  navigation  menu,  which  will  take  us  to 
the  page  we  want.  For  this,  we  need  to  modify  the  HTML  part 
of  the  page.  We  will  add  a  table  below  the  data,  which  will 
show  the  page  numbers.  This  will  be  a  simple  table  with  one 
row. 

<table  id="navMenu"  border="l"> 

<tr> 


</tr> 
</table> 

We  will  also  add  a  function  which  will  populate  this  row 
with  the  different  page  numbers. 

function  buildNavMenu ( ) 

{ 

navMenu  =  document . getElementByld ( 'navMe 
nu' ) . rows [0 ] ; 

for    (i=0;   i<noOf Pages ; i++) { 

newcell  =  navMenu. insertCell (-1) ; 
newcell . innerHTML  =  i+1; 
newcell . onclick  =  new  Function  ("d 
isplayPage ("+i+") ; ") ; 
} 

} 

Let's  examine  what's  going  on  in  this  function: 

•    navMenu  =  document . getElementByld ( 'navMenu' ) . 
rows [  0  ]  ; 

In  this  line,  we  are  storing  a  reference  to  the  navigation 
menu  row  in  the  variable  'navMenu'.  This  essentially 
retrieves  the  'navMenu'  table,  and  retrieves  a  reference 
to  its  first  row  (index  0)  and  stores  it  in  the  variable  'nav- 
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•  for    (i=0;   i<no0f Pages; i++) 

Quite  clearly,  this  will  repeat  the  loop  for  each  page. 

•  newcell  =  navMenu . insertCell (-1 ) ; 

This  creates  a  new  cell  at  the  end  of  the  row  (index  -1),  and 
stores  a  reference  to  it  in  the  variable  'newcell'. 

•  newcell . innerHTML  =  i+1; 

Now  we  add  the  page  number  inside  the  cell.  The  page 
number  will  be  one  more  than  the  index,  because  while 
computers  work  with  a  starting  index  of  0,  for  humans 
(who  will  be  using  the  page),  1  is  a  more  comfortable  place 
to  start. 

•  newcell . onclick  =  new  Function ("displayPage (" 
+i+") ;") ; 

This  line  does  the  equivalent  of  setting  the  'onclick'  attri- 
bute of  the  table  cell  to  'displayPage(i)'.  Let  us  look  at  the 
HTML  equivalent  of  this  when  'i  =  3',  for  better  clarity: 
<td  onclick=' displayPage (3) ' >4</td> 
The  code  element  'new  Function()'  creates  a  function 
which  has  the  code  that  is  provided  in  the  parameter. 
Take  a  look  at  the  complete  code  of  our  application  as  of 

now.  The  script  part  and  the  HTML  part  are  shown  separately, 

as  the  code  is  quite  large. 

Script  part: 

var  dataLoader; 

var  data; 

var  dataLength  =  0; 

var  itemsPerPage  =  10; 

var  noOf Pages  =  0; 

var  movieTable; 

function  createAJAXObject ( ) { 


var  httpReq; 
try  { 

httpReq 


new  XMLHttpRequest ( )  ; 


catch   (e)  { 
try  { 
httpReq 


new  ActiveXObject ("Msxml2 . 
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XMLHTTP" ) ; 


catch    (e)  { 
try  { 

httpReq  =  new  ActiveXOb j ect  ("Microsoft 
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XMLHTTP") ; 


catch   (e)  { 

return  false; 
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return  httpReq; 
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function  loadData ( )  { 

dataLoader  =  createAJAXObj ect ( ) ; 
dataLoader . onreadystatechange  =  onDataLoad; 
dataLoader . open ( 'GET' ,    'movies. xml' ,  true); 

dataLoader . send (null) ; 

} 

function  onDataLoad () { 

if    (dataLoader . readyState   !=  4) 
return; 

if    (dataLoader . status    !=  200   &&  dataLo- 
ader. status    !=  0) 
return; 


data   =   dataLoader . responseXML . documen- 


movieTable  =  document . getElementByld ( 'm 


dataLength  =  data. length; 

noOf Pages  =  data. length  /  itemsPerPage; 

display Page (0) ; 

buildNavMenu () ; 

} 

function  displayPage (pagenum) { 


tElement . getElementsByTagName ( 'movie' ) ; 


ovies' ) ; 
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startltem  =  pagenum  *  itemsPerPage; 
endltem  =  startltem  +  itemsPerPage; 

while    (movieTable . rows . length  >  1) 
movieTable . deleteRow ( 1 )  ; 

for    (i  =  startltem;   i  <  endltem;   i++)  { 
newrow  =  movieTable . insertRow (-1 )  ; 
newrow . insertCell (-1 ) . innerHTML  = 
data  [  i ]  . getElementsByTagName ( 'rank' )  [0]  .text- 
Content; 

newrow . insertCell (-1 ) .innerHTML  = 
data  [ i ]  . getElementsByTagName ( 'name'  )  [ 0 ]  . text- 
Content; 

newrow . insertCell (-1 ) .innerHTML 
=  datafi] . getElementsByTagName ( 'earning' ) [0] . 
textContent; 


function  buildNavMenu ( ) { 

navMenu  =  document . getElementByld ( 'navMe 
nu' ) . rows [0 ] ; 

for    (i  =  0;    i  <  noOfPages;   i++)  { 

newcell  =  navMenu. insertCell  (-1) ; 
newcell . innerHTML  =  i  +  1; 

newcell . onclick     =  new 
Function ( "displayPage ( "  +  i  +  ");"); 
} 

} 

HTML  Part: 

<html> 

<head> 

<title>My  AJAX  App</title> 
<script  type="text/ javascript"> 
<!  — 

SCRIPT  CONTENT  GOES  HERE 
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</ script> 

</head> 

<body  onload="loadData ( )  "> 

<table  width="500"  border="l" 

id="movies"> 

<tr> 

<th  scope="col">Rank</th> 

<th  scope="col">Name</th> 

<th  scope="col">Earning</th> 
</tr> 
</table> 

<table  id="navMenu"  border="l"> 
<tr> 

<td> 
</td> 
</tr> 
</table> 
</body> 
</html> 

To  make  it  easier 
to  further  work  on 
this,  you  can  con- 
sider separating  the 
JavaScript  code  and 
placing  it  in  separate 
'script.js'  file,  which 
can  then  be  includ- 
ed in  the  HTML  file 
using  a  script  tag  as 
follows: 

<script 
js"  /> 

You  may  have  noticed  the  absence  of  'Next'  and  'Previous' 
page  buttons,  or  of  'First'  and  'Last'  page  buttons.  So  let's  go 
ahead  and  add  those.  First,  let's  deal  with  the  JavaScript  part 
of  this  problem.  We  need  to  be  able  to  do  four  things: 
•   Go  to  the  first  page:  this  is  simple,  all  you  need  to  do  is  call 


Rank 

Name 

Earning 

1 

Titanic  |6007S8iS8 

2 

STAR  WARS  (1977) 

460988007 

3 

Star  Wars:  Episode  I:  The  Phantom  Menace 

4310BB295 

4 

E.T.  THE  EXTRA-TERRESTRIAL  (1982) 

399S04539 

5 

Jurassic  Park 

357057947 

6 

FORREST  GUMP  (2994) 

329694499 

7 

Lion  King,  The 

312855561 

S 

Return  of  the  Jedi 

309153948 

9 

Independence  Day 

306169255 

10 

Sixth  Sense,  The 

293501675 

AJAX  example  with  navigation 

type="text/ j avascript"     src=" script . 
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'displayPage'  with  a  parameter  of  '0'.  No  matter  how  many 
pages  there  are,  0  will  always  be  the  first  page. 

•  Go  to  the  last  page:  this  becomes  a  little  tricky,  as  we 
don't  know  which  page  will  be  the  last  till  we  read  the 
data.  What  we  will  do  instead  is,  extend  the  'displayPage' 
function  to  support  a  parameter  of  '-1'  which  will  always 
correspond  to  the  last  page.  You  can  choose  to  use  infinity, 
but  that  would  take  rather  long  to  type! 

•  Go  to  the  previous  page  and  next  page:  We  will  create  a 
new  function  for  this,  and  also  add  a  variable  which  stores 
the  current  page  number.  The  function  needs  to  account 
for  the  fact  that  the  user  may  click  on  the  next  page  but- 
ton when  they  are  on  the  last  page  already,  or  click  on  the 
previous  page  button  when  they  are  in  fact  on  the  first 
page.  This  new  function  will  take  a  parameter  of  1  or  -1  to 
signify  the  direction  in  which  to  go. 

Take  a  look  at  the  updated  'displayPage'  and  new  'gotoPage' 
functions. 

var  currentPage  =  0; 


function  displayPage (pagenum) { 

if    (pagenum  —  -1) 

pagenum  =  noOf Pages  -  1; 


currentPage  =  pagenum; 
startltem  =  pagenum  *  itemsPerPage; 
endltem  =  startltem  +  itemsPerPage; 
while    (movieTable . rows . length  >  1) 

movieTable . deleteRow ( 1 )  ; 
for    (i  =  startltem;   i  <  endltem;   i++)  { 
newrow  =  movieTable . insertRow (-1 )  ; 
newrow . insertCell (-1 ) . innerHTML  = 
data  [  i ]  . getElementsByTagName ( 'rank' )  [ 0 ]  .text- 
Content; 

newrow . insertCell (-1 ) .innerHTML  = 
data  [ i ]  . getElementsByTagName ( 'name' )  [ 0 ]  . text- 
Content; 

newrow . insertCell (-1 ) .innerHTML 
=     data[i] . getElementsByTagName ( 'earning' ) [0] . 
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textContent; 
} 

} 

function  gotoPage (direction) { 

newpage  =  currentPage  +  direction; 
if (newpage  <  noOf Pages  &&  newpage  >=  0) 
displayPage (newpage)  ; 

} 

In  the  updated  'displayPage'  function,  we  now  check  if  the 
page  requested  is  or  the  last  page,  in  which  case,  we  go  to 
the  last  page  (the  last  page  will  be  one  less  than  the  noOfPages, 
as  the  no  of  pages  counts  the  0th  page  as  well).  It  also  updates 
the  global  'currentPage'  variable  with  the  current  page  num- 
ber. Not  that  the  variable  'currentPage'  has  to  be  declared  once 
outside  all  the  functions  to  be  accessible  globally. 

In  the  new  'gotoPage'  function,  we  first  calculate  the 
new  page  number,  by  adding  'direction'  to  the  current 
page  (newpage  =  currentPage  +  direction).  Then  we 
check  if  the  new  page  number  is  within  bounds,  or  basi- 
cally that  it  is  less  than  the  total  number  of  pages  (newpage 
<  noOf  Pages)  and  not  less  than  zero  (newpage  >=  0).  If 
the  new  page  number  is  within  bounds,  we  go  directly  to  it 
(displayPage  (newpage)). 

Now  take  a  look  at  the  HTML  code  for  the  new  navigation 
mechanism. 

<table  border="l"> 
<tr> 

<td  onclick="displayPage (0) ">f irst</td> 
<td  onclick="gotoPage (-1) ">previous</td> 
<td  onclick="gotoPage (1) ">next</td> 
<td  onclick="displayPage (-1) ">last</ 

td> 

</tr> 
</table> 

This  can  be  placed  between  the  data  list,  and  the  pages  list. 
Before  we  take  a  look  at  the  code  as  a  whole,  let  us  first  add 
another  feature  quite  popular  in  web  sites.  That  is  to  let  the 
user  select  how  many  items  to  show  on  the  page.  This  can  be 
done  by  giving  the  user  a  combo  box  /  dropdown  box  contain- 
ing a  number  of  options.  For  our  purposes,  we  will  give  the 


BED  FAST  TRACK 


71 


www.thinkdigit.com 


Rank 

Name 

Earning 

31 

GONE  WITH  THE  "WIND  (1 939) 

198655278 

~2 

Indiana  Jones  and  the  Last  Crusade 

197171806 

B3  

Toy  Story 

1917730-49 

34 

Gladiator 

186610052 

SNOW  WHITE  &  THE.  SEVEN  DWARFS  (1937) 

184925486 

36 

DANCES  WITH  WOLVES  (1990) 

184208848 

37 

Batman  Forever 

184031112 

38 

Fugitive,  The 

183875760 

39 

181700000 

40 

Liar  Liar 

181410615 

|first  [previous  jnext  |last  | 

More  flexible  navigation 


user  an  option  to 
choose  between  dis- 
playing 5,  10,  15, 
20,  25,  30,  35,  40, 
45  and  50.  In  a  real 
application,  we  may 
limit  these  choices, 
but  for  now  we  con- 
sider as  many  as  we 
can  so  that  we  can 
test  how  well  the 
app  works  in  differ- 
ent situations. 

So  how  do  we  go  about  doing  this?  All  we  need  to  do  is  to 
create  a  dropdown  box  listing  the  no.  of  items  to  display  per 
page  and  refresh  the  page  every  time  this  value  is  changed. 
Simple! 

The  reason  it  is  that  simple  is  because  all  our  functions 
have  been  written  taking  into  account  the  variable  'item- 
sPerPage'.  Now  it  is  merely  a  matter  of  changing  the  value  of 
'itemsPerPage'  and  then  refreshing  the  contents  of  the  page 
and  the  functionality  is  ready! 

First  we  add  a  select  box  to  out  HTML  page. 

<P> 

No.   of  items  to  display  per  page: 
<select   id=" itemsPerPage"  onchange="changeIt 
emsPerPage ( ) "> 
</ select> 
</p> 

This  is  added  above  the  data  list. 

Now  we  create  a  function  to  generate  options  for  this 
select  box.  You  can  of  course  have  all  of  this  statically  present 
in  the  HTML  file,  as  this  will  not  change  once  the  page  loads. 
However,  it  will  be  much  more  controllable  via  JavaScript. 

function  generatePageOptions ( f rom,  to, 
step) { 

ippSelect  =  document . getElementByld ( 'ite 
msPerPage' ) ; 

for    (i  =  from;   i  <=  to;   i  +=  step)  { 

var     newElem     =  document. 
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createElement ("option") ; 

newElem.text  =  i; 

newElem. value  =  i; 

ippSelect . options . add (newElem)  ; 

} 

} 

This  function  is  taking  three  parameters. 

•  The  parameter  'from'  tells  the  function  the  minimum 
value  option  for  'itemsPerPage'  from  where  to  start  gener- 
ating. 

•  The  parameter  'to'  tells  the  function  the  maximum  value 
option  for  'itemsPerPage'  until  which  to  generate  options. 

•  The  parameter  'step'  defines  how  much  fine  grained  con- 
trol the  user  should  have  between  values. 

In  our  case,  we  want  to  generate  options  at  a  step  of  '5' 
between  '5'  and  '50'.  To  do  that  we  will  add  a  call  to  this 
function  in  out  'onDataLoad'  function.  This  way  we  have  full 
extensibility,  we  can  just  as  easily  give  options  from  '10'  to  '25' 
with  a  step  of  '3'  between  each. 

One  of  the  reasons  we  choose  to  have  the  odd  option  of 
15,  35,  45  items  per  page  is  so  that  we  encounter  the  case 
where  the  last  page  has  less  items  than  defined  in  'itemsPerP- 
age'. Here  we  will  need  to  update  our  'displayPage'  function, 
to  check  for  such  a  situation,  and  end  the  loop  right  there, 
instead  of  adding  empty  rows. 

function  displayPage (pagenum) { 
if    (pagenum  —  -1) 

pagenum  +=  noOf Pages; 
currentPage  =  pagenum; 
startltem  =  pagenum  *  itemsPerPage; 
endltem  =   (startltem  +  itemsPerPage); 
if(endltem  >  dataLength) 

endltem  =  dataLength; 

while    (movieTable . rows . length  >  1) 
movieTable . deleteRow ( 1 ) ; 

for    (i  =  startltem;    i  <  endltem;    i++)  { 
newrow  =  movieTable . insertRow (-1 ) ; 
newrow . insertCell (-1 ) . innerHTML  = 
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data  [  i ]  . getElementsByTagName ( 'rank' )  [ 0 ]  . text- 
Content; 

newrow . insertCell (-1 ) . innerHTML  = 
data  [ i ]  . getElementsByTagName ( 'name' )  [ 0 ]  . text- 
Content; 

newrow . insertCell (-1 ) .innerHTML 
=  datafi] . getElementsByTagName ( 'earning' ) [0] . 
textContent; 


As  you  can  see  all  we  added  was  a  check  for  the  situation 
when  the  calculated  end  item  is  out  of  the  range  of  the  data 
(endltem  >  dataLength),  and  in  that  case,  terminate  the 
data  iteration  at  the  last  data  item. 

Finally  we  will  need  to  update  the  contents  of  the  page 
whenever  the  'itemsPerPage'  count  changes.  For  this  purpose 
we  create  a  function  called  'changeltemsPerPage'  which  will 
update  the  value,  and  calculate  the  new  no.  of  pages,  and 
then  refresh  the  navigation  menu  and  the  data, 
function  changeltemsPerPage () { 

itemsPerPage  =  Number (document . getElemen 
tById( 'itemsPerPage' ) .value) ; 

noOfPages  =  Math. ceil (dataLength  /  item- 
sPerPage) ; 

displayPage (0) ; 

buildNavMenu ()  ; 

} 


Now  that  we  have  implemented  this  functionality,  let  us 
have  another  look  of  what  our  code  has  become.  Once  again 
the  JavaScript  code  and  the  HTML  code  will  be  given  separate, 
but  you  can  keep  them  in  the  same  file. 

var  dataLoader; 
var  data; 

var  dataLength  =  0; 
var  itemsPerPage  =  10; 
var  noOf Pages  =  0; 
var  movieTable; 
var  currentPage  =  0; 
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function  createAJAXObject ( ) { 
var  httpReq; 
try  { 

httpReq  =  new  XMLHttpRequest ( )  ; 

} 

catch   (e)  { 
try  { 

httpReq  =  new  ActiveXObject ("Msxml2  . 

XMLHTTP" ) ; 

} 

catch    (e)  { 
try  { 

httpReq    =  new 
ActiveXObject ( "Microsoft . XMLHTTP" ) ; 
} 

catch   (e)  { 

return  false; 

} 

} 

} 

return  httpReq; 

} 

function  loadData ( ) { 

dataLoader  =  createAJAXObj ect ( )  ; 
dataLoader . onreadystatechange  =  onData- 

Load; 

dataLoader . open ( 'GET' ,      'movies . xml' , 

true)  ; 

dataLoader . send (null) ; 

} 

function  onDataLoad ( ) { 

if    (dataLoader . readyState   !=  4) 
return; 

if    (dataLoader . status    !=  200   &&  dataLo- 
ader. status    !=  0) 
return; 

data   =   dataLoader . responseXML . documen- 
tElement . getElementsByTagName ( 'movie' ) ; 

movieTable   =  document . getElementByld ( 'm 

ovies' ) ; 
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dataLength  =  data. length; 
noOf Pages  =  data. length  /  itemsPerPage; 
generatePageOptions (5,    50,  5); 
changeltemsPerPage () ; 


function  generatePageOptions ( from,  to, 
step)  { 

ippSelect  =  document . getElementByld ( 'ite 
msPerPage' ) ; 

for    (i  =  from;   i  <=  to;   i  +=  step)  { 

var     newElem     =  document. 
createElement ("option") ; 

newElem.text  =  i; 

newElem. value  =  i; 

ippSelect . options . add (newElem)  ; 


} 


} 


function  displayPage (pagenum) { 
if    (pagenum  ==  -1) 

pagenum  +=  noOf Pages; 
currentPage  =  pagenum; 
startltem  =  pagenum  *  itemsPerPage; 
endltem  =    (startltem  +  itemsPerPage) ; 


if (endltem  >  dataLength) 

endltem  =  dataLength; 


while    (movieTable . rows . length  >  1) 
movieTable . deleteRow ( 1 ) ; 


for    (i  =  startltem;   i  <  endltem;   i++)  { 
newrow  =  movieTable . insertRow (-1 )  ; 
newrow . insertCell (-1 ) . innerHTML  = 
data  [  i ]  . getElementsByTagName ( 'rank'  )  [ 0 ]  .text- 
Content; 

newrow . insertCell (-1 ) .innerHTML  = 
data  [ i ]  . getElementsByTagName ( 'name' )  [ 0 ]  . text- 
Content; 
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newrow . insertCell (-1 ) . innerHTML 
=  datafi] . getElementsByTagName ( 'earning' ) [0] . 
textContent; 


function  gotoPage (direction) { 

newpage  =  currentPage  +  direction; 
if    (newpage   <   noOfPages    &&   newpage  >= 

0) 

displayPage (newpage)  ; 

} 

function  changeltemsPerPage ( ) { 

itemsPerPage  =  Number (document . getElemen 
tById( 'itemsPerPage' ) .value) ; 

noOf Pages  =  Math . ceil (dataLength  /  item- 
sPerPage) ; 

displayPage (0) ; 

buildNavMenu () ; 

} 

function  buildNavMenu () { 

navMenu  =  document . getElementByld ( 'navMe 
nu' ) . rows [0 ] ; 

navMenu . innerHTML  =  w; 

for    (i  =0;    i  <  noOfPages;   i++)  { 

newcell  =  navMenu. insertCell (-1)  ; 
newcell . innerHTML  =  i  +  1; 

newcell . onclick     =  new 
Function ( "displayPage ( "  +  i  +  ");"); 
} 

} 


<html> 
<head> 

<title>My  AJAX  App</title> 
<script    type="text/ j avascript"  src="script. 
js"> 

</ script> 
</head> 

<body  onload="loadData () "> 
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F 

A 

<P> 

S 

No  of  items  to  display  per  page: 

T 

<select   id=" itemsPerPage"  onchange="changeIt 

T 

emsPerPage ( ) "> 

R 

</ select> 

A 

</p> 

C 

<table      width="500"  border="l" 

K 

id="movies"> 

<tr> 

T 

n 

<th  scope="col">Rank</th> 

u 

<th  scope="col">Name</th> 

A 

<th  scope="col">Earning</th> 

J 

</tr> 

A 

</table> 

X 

<table  border="l"> 

<tr> 

<td  onclick="displayPage (0) ">first</ 

td> 

<td   onclick="gotoPage (-1 ) ">previ- 

ous</td> 

<td  onclick="gotoPage (1) ">next</td> 

<td  onclick="displayPage (-1) ">last</ 

td> 

</tr> 

</table> 

<table  id="navMenu"  border="l"> 

<tr> 

<td> 

</td> 

</tr> 

</table> 

</joouy> 

</html> 

Now  we  have  quite  a  powerful  system  for  navigating  a 

large  database. 

The  app  looks  rather  crude,  so  let's  put  in  some  effort  to 

make  it  look  slightly  better.  We  will  use  a  CSS  style  sheet,  and 

include  it  in  the  document.  Some  more  minor  changes  after 

that,  and  we  have  a  much  better  looking  app.  You  can  get  this 
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No  of  items  to  display  per  page: 


Titanic 


STAR  WARS  (1977) 


Star  Wars:  Episode  I 


jE.T.  THE  EXTRA- IE 


Jurassic  Park 


Earning 


6Q07S8188 


460988007 


ntom  Menace 


RIAL  (1982) 


FORREST  GUMP  (1994) 


|Lion  King,  The 
Return  of  the  Jedi 


independence  Day 


Sixth  Sense,  The 


293501675 


first  [previous  jnext  |last 


l|J|3|4|?|6|7|8|9[l0 


F 

A 
S 
T 

T 
R 
A 
C 
K 

T 
0 

A 
J 

A 

X 


Now  Navigation,  and  control  over  no.  of  items 
displayed!  You're  on  a  Roll! 

style  sheet  along  with  all  the  example  code  in  this  book  from 
the  ThinkDigit  web  site.  The  style  sheet  and  the  HTML  code 
including  it  are  printed  here  in  any  case. 

.  navmenu  td{ 

border:   thin  solid  #333; 
background-color:  #666; 
color:  #FFF; 
cursor:  default; 

} 

.navmenu  td: hover { 

border:   thin  solid  #333; 
background-color:  #333; 
color:  #FFF; 
cursor:  default; 

} 

#movies  th  { 

color:  #000; 
background-color:  #CCC; 
margin-right:  5px; 
margin-left:  5px; 
padding-right:  5px; 
padding-left:  5px; 
border-top-style:  solid; 
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F 
A 
S 
T 


border 
border 
border 
border 
border 
border 
border 
border 
border 


■bottom-color:  #000; 
■right-style:  solid; 
■left-style:  solid; 
■right-color:  #FFF; 
■left-color:  #FFF; 
■right-width:  thin; 
■left-width:  thin; 


top-width:  thin; 
top-color:  #000; 


T 
R 
A 
C 
K 


T 
0 


#movies  td  { 

color:  #000; 
padding-top:  Opx; 
padding-bottom:  Opx; 


A 
J 

A 

X 


margin-top:  Opx; 
margin-bottom:  Opx; 
background-color:  #ddd; 
border-top-width:  thin; 
border-bottom-width:  thin; 
border-top-style:  solid; 
border-bottom-style:  solid; 
border-top-color:  #999; 
border-bottom-color:  #999; 


Place  this  code  in  a  file  called  'style. ess'  in  the  same  folder 
as  the  other  files. 

Since  we've  already  discussed  CSS,  we  will  not  go  into 
what  is  happening  here. 

<html> 
<head> 

<title>My  AJAX  App</title> 
<script  type="text/ j avascript"  src=" script, 
j  s"></ script> 


<link  href ="style . ess"    rel=" stylesheet" 


type="text/css"  /> 
</head> 

<body  onload="loadData () "> 


<p>No    of    items    to    display   per  page: 


onchange="change!temsPerPage () "> 


<select  id="itemsPerPage 


ii 
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</select></p> 
<table   width="500"   border="0"  cellpad- 
ding="0"  cellspacing="0" 
id="movies"> 
<tr> 

<th  scope="col">Rank</th> 
<th  scope="col">Name</th> 
<th  scope="col">Earning</th> 
</tr> 
</table> 

<table  class="navmenu"> 
<tr> 

<td  onclick="displayPage (0) ">first</ 


td> 

ous</td> 


<td   onclick="gotoPage (-1 ) ">previ- 

<td  onclick="gotoPage (1) ">next</td> 
<td  onclick="displayPage (-1) ">last</ 


td> 


</tr> 
</table> 

<table  class="navmenu"  id="navMenu"> 
<tr> 
<td> 
</td> 
</tr> 
</table> 
</body> 
</html> 

This  is  the  HTML  code  with  minor  changes  to  better 

accommodate 
the  CSS  styles. 

In  our  final 
act,  we  will 
now  add  func- 
tionality simi- 
lar to  Google 
Suggest  in  our 
app.  For  those 


[No  of  items  to  display  per  page:  [&  ^ 

Rank  Name 

Earning 

1  Titanic 

600788188 

I           STAR  WARS  (1977) 

460988007 

3            Star  Wars:  Episode  I:  The  Phantom  Menace 

431088295 

*           E.T.  THE  EXTE.4-TERRESTRIAL  (1982) 

399804539 

5            Jurassic  Park 

357067947 

Just  adding  some  attitude! 
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unfamiliar  with  Google  Suggest,  it  is  a  search  feature,  where 
functionality  such  as  auto-complete,  and  dropdown  sugges- 
tions appear  when  you  start  typing  your  search  terms. 

Since  this  is  a  small  offline  database,  we  will  simply  have 
a  small  dropdown  displayed  below  a  search  field  which  will 
contain  possible  matches  and  data  about  them. 

First,  let's  add  a  search  field  right  at  the  top,  above  every- 
thing else. 

<P> 

Quick  look  into  the  database: 
<input  id="  suggestf ield"  type="text"  onkeyup= 
"getSuggestions ( ) "  onBlur="hideSuggestions ( )  "/> 
</p> 

This  text  field  will  call  the  'getSuggestions'  function  every 
time  you  enter  a  letter  into  the  textbox  (onkeyup),  and  when 
the  textbox  loses  focus  (onblur),  the  suggestions  are  hidden. 

The  suggestions  themselves  have  to  be  displayed  in  some 
place.  We  will  use  a  <div>  tag  with  a  table  in  it  for  showing 
the  suggestions. 

<div  id="suggestionsPane"> 
Suggestions : <hr /> 

<table    width="500"    border="0"  cellpad- 
ding="0"  cellspacing="0 "  id="suggestions"> 
<tr> 
</tr> 
</table> 
</div> 

This  is  the  content  of  the  dropdown  that  will  be  displayed 
when  the  user  starts  typing  in  the  'suggestfield'.  We  rely  on 
CSS  for  hiding  and  showing  this  <div>  element,  so  let  us  see 
the  styles  too. 

#suggestionsPane  { 
color:  #000; 
background-color:  #FFF; 
display:  none; 
width:  500px; 
position:  absolute; 
border-top-width:  medium; 
border-right-width:  medium; 
border-bottom-width:  medium; 
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border-left-width:  medium; 
border-top-style :  solid; 
border-right-style:  solid; 
border-bottom-style:  solid; 
border-left-style:  solid; 
border-top-color:  #CCC; 
border-right-color:  #333; 
border-bottom-color:  #333; 
border-left-color:  #CCC; 
cursor:  default; 
top:  25px; 

} 

#suggestionsPane  tr{ 

border-top-width:  thin; 
border-right-width:  thin; 
border-bottom-width:  thin; 
border-left-width:  thin; 
border-top-style:  solid; 
border-right-style:  none; 
border-bottom-style:  solid; 
border-left-style:  none; 
border-top-color:  #666; 
border-right-color:  #666; 
border-bottom-color:  #666; 
border-left-color:  #666; 

} 

#suggestionsPane  tr: hover { 
background-color:  #888; 

} 

This  might  seem  a  lot  for  the  job.  However,  most  of  it  is 
just  to  make  the  'suggestionsPane'  look  and  behave  more  like 
a  dropdown.  The  minimal  CSS  style  sheet  for  this  job  would 
simply  be: 

#suggestionsPane  { 
display:  none; 

} 

Small  isn't  it!  Basically,  the  only  thing  we  want  is  that  the 
suggestions  be  hidden  till  needed.  After  that,  the  rest  is  to 
make  it  behave  like  an  element  that  has  popped  up,  make  it 
look  like  a  list  instead  of  a  table,  and  to  beautify  it,  etc.  Add 
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the  CSS  code  to  the  old  file  to  get  a  better  dropdown. 

Now  for  the  core  functionality,  we  add  the  functions 
'getSuggestions'  and  'hideSuggestions'. 

Lets  look  at  'getSuggestions'  line  by  line: 

•  searchtext  =  document . getElementByld (' suggest 
field' ) .value; 

This  will  just  get  the  value  entered  in  the  suggestions 
field,  and  store  it  in  the  variable  'searchtext'. 

•  document . getElementByld ( 1 suggestionsPane' ) . 
style . display  =  'block'; 

This  will  'unhide'  the  'suggestionsPane'  by  setting  its  dis- 
play property  from  'none'  to  'block'. 

•  document . getElementByld (  'suggestions'  )  . 
innerHTML  =    " ; 

This  will  clear  the  'suggestionsPane'. 


•    for    (i  =  0;   i  <  dataLength;  i++) 
We  now  iterate  over  all  the  data. 


•    if   (data [ i] . textContent . indexOf ( searchtext)  > 
-1)  { 

This  checks  if  the  current  row  of  data  contains  the  text  in 
the  'searchtext'  variable. 


•  newrow  =  document . getElementByld (' suggestions 
' ) . insertRow (-1 ) ; 

newrow. insertCell (-1 ). innerHTML     =  data[i]. 
getElementsByTagName ( 'rank' ) [0] .textContent; 
newrow. insertCell (-1 ). innerHTML     =  data[i]. 
getElementsByTagName ( 'name' ) [0] .textContent; 
newrow . insertCell (-1 ). innerHTML  =  data[i].get 
ElementsByTagName ( 'earning' ) [0] .textContent; 
These  may  seem  familiar  to  you.  This  is  the  same  proce- 
dure we  used  to  add  rows  to  the  main  data  table  'movies' 
earlier,  in  the  'displayPage'  function. 

•  if      (document . getElementByld (' suggestions' ) . 
rows. length  >  noOf Suggestions ) 
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break; 
} 

This  code  will  stop  the  search  once  enough  matches  are 
found.  You  can  control  how  many  suggestions  are  shown 
in  the  dropdown  using  the  'noOfSuggestions'  variable.  In 
our  code,  we  are  setting  it  to  6. 
The  'hide- 


Quick  look  into  the  database:  Istj 

Suggestions: 

3    Star  Wars:  Episode  I:  The  Phantom  Menace 

431088295 

1 6  Toy  Story  2 

245823397 

33  Toy  Story 

191773049 

41  Perfect  Storm.  The 

181239864 

66  Sting:  The 

156000000 

92  Stuart  Little 

140015224 

6           FORREST  GUMP  (1994) 

329694499 

Lion  King,  The 

312855561 

8           Return  of  the  Jedi 

309153948 

9           Independence  Day 

306169255 

10          Sixth  Sense,  The 

293501675 

□BQBBBBE3BEQ 

AJAX  suggestions 


Suggestions' 
function  is 
simple  enough. 
All  it  does  is 
sets  the  display 
style  of  the 
'suggestions- 
Pane'  to  'none' 
so  it  is  no  lon- 
ger displayed 
on  screen. 

And  that's 
it!  We  have  a 
functional  sug- 
gestions application! 

Another  small  feature  you  can  add  to  this,  which  will 
make  it  even  more  worthwhile  is,  to  actually  make  it  do 
something  with  the  movies.  How  about  we  search  in  IMDB 
(The  Internet  Movie  Database)  for  the  movie  whenever  anyone 
double-clicks  on  a  row  containing  the  name  of  the  movie?  It 
is  simple  enough,  we  just  need  to  update  our  'displayPage' 
function  to  incorporate  this  functionality, 
function  displayPage (pagenum) { 
if    (pagenum  ==  -1) 

pagenum  +=  noOf Pages; 
currentPage  =  pagenum; 
startltem  =  pagenum  *  itemsPerPage; 
endltem  =   (startltem  +  itemsPerPage); 
if    (endltem  >  dataLength) 
endltem  =  dataLength; 
while    (movieTable . rows . length  >  1) 

movieTable . deleteRow ( 1 )  ; 
for    (i  =  startltem;   i  <  endltem;   i++)  { 
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newrow  =  movieTable . insertRow (-1 )  ; 
newrow . insertCell (-1 ) . innerHTML  = 
data  [  i ]  . getElementsByTagName ( 'rank'  )  [0]  .text- 
Content; 

newrow . insertCell (-1 ) .innerHTML  = 
data [ i ]  . getElementsByTagName ( 'name ' )  [ 0 ]  .text- 
Content; 

newrow . insertCell (-1 ) .innerHTML 
=  data[i] . getElementsByTagName ( 'earning' ) [0] . 
textContent; 

imdbsearch  =  "http://www.imdb.com/ 
find?s=tt&q="  + 

unescape (data [ i ] . getElementsByTagName ( 'name' 
) [0] .textContent) ; 

newrow . ondblclick  =  new  Function ( 'window, 
location  =  "'   +  imdbsearch  +   "'  ;'); 
} 

} 

We  only  needed  to  add  two  lines  to  get  this  functionality. 
Firstly,  we  generate  a  URL  which  will  take  us  to  the  search  page. 
This  URL  is  (http://www.imdb.com/find?s=tt&q=)  followed  by  the  movie 
name.  We  use  the  'unescape'  function  to  make  sure  that  the 
name  of  the  movie  is  compatible  with  URL  naming  schemes. 

The  second  line  attaches  a  function  to  the  'ondblclick'  (on 
double  click)  event  of  the  row,  which  takes  the  user  to  the 
generated  URL. 

Now,  in  a  final  stroke  of  genius,  we  will  add  an  awesome 
new  feature  to  the  'suggestions'  feature  of  the  application. 
Search  Highlighting. 

Basically  it  will  highlight  the  text  we  were  searching  for 
in  the  results.  It  sounds  complicated  and  difficult,  but  really 
it  isn't.  Not  that  much! 

For  this  we  will  modify  the  'getSuggestions'  function. 

function  getSuggestions  ()  { 

searchtext  =  document . getElementByld (' su 
ggestfield' ) .value; 

document . getElementByld ( ' suggestionsPane 
'). style . display  =  'block'; 

document . getElementByld ( 'suggestions' ) . 
innerHTML  =    "  ; 
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for    (i  =0;    i  <  dataLength;   i++)    {  A 
if      (data [i] . textContent . 
indexOf (searchtext)    >  -1)  { 

newrow  =  document . getElementByl  j 
d(  'suggestions' )  . insertRow (-1 ) ;  R 

A 

newrow . insertCell (-  C 
1) .innerHTML    =    data [i ] . getElementsByTagName ( 'r 
ank' ) [0] . textContent . replace ( searchtext,  "<span 
class=' match' >"  +  searchtext  +  "</span>"); 

newrow . insertCell (-  ^ 
1) .innerHTML    =    data [i ]. getElementsByTagName ( 'n 
ame' )[ 0 ]. textContent . replace ( searchtext,     "<span  A 
class=' match' >"  +  searchtext  +  "</span>"); 


newrow . insertCell (-1 ) .innerHT- 
ML     =     data [i] .getElementsByTagName ( 'earning' ) 
[0]  .  textContent . replace ( searchtext,  "<span 
class='match' >"  +  searchtext  +  "</span>"); 
} 

if  (document . getElementBy Id ( 'suggest 
ions' ). rows . length  >  noOf Suggestions) 

Now  this  looks  REALLY  complicated!  But  let's  look  only  at 
the  changes  in  the  code.  That  would  be  the  right-hand  side  of 
the  three  (newrow .  insertCell  (-1 )  .  innerHTML  =  )  lines. 
Let's  see  what  one  of  them  does,  and  the  others  follow  the 
same  principle. 

Instead  of  the  original: 

newrow . insertCell (-1 ). innerHTML  =  data[i]. 
getElementsByTagName ( 'name' ) [0] .textContent; 

We  now  have: 

newrow . insertCell (-1 ) .innerHTML  = 

data [ i ] . getElementsByTagName ( 'name ' ) [ 0 ] . 
textContent . replace ( 

searchtext, 

"<span  class=' match' >" 
+  searchtext  + 
"</span>" 
)  ; 
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Let's  break  this  down  further: 

Our  original  line  was  (datafi]  .getElementsByTagNam 
e  (  'name'  )  [0  ]  .  textContent)  which  was  retrieving  the  text 
content  of  the  movie's  name  tag. 

Now  we  are  taking  that  text  content,  and  replacing  every 
instance  of  the  content  of  the  'searchtext'  variable  (which  is 
the  value  entered  in  the  search  box),  and  replacing  it  with 
("<span  class=' match' >"  +  searchtext  +  "</span>"). 
This  is  basically  enclosing  the  instances  of  the  search  text 
within  a  <span>  tag  which  has  been  assigned  a  style  class  of 
'match'. 

.match 


{ 


background-color:  #00ffff; 


Whatever  style  we  now  define  in  the  CSS  style  for  a  class  of 
'match',  will  be  applied  to  the  instances  of  the  search  text!  In 
our  case  we  are  highlighting  it  with  a  cyan  background,  but 
you  can  do  whatever  you  want. 


Quick  look  into  the  database:  iBa 

Suggestions: 

11 

Empire  Strikes  Back:  The 

290266497 

14 

Batman 

251188924 

3" 

Batman  Forev  er 

184031112 

55 

Three  Men  and  a  Baby 

167780960 

59 

Batman  Returns 

162831698 

5 

Jurassic  Park 

357067947 

6 

FORREST  GUMP  (1994) 

329694499 

7 

Lion  King,  The 

312855561 

S 

Return  of  (he  Jedi 

309153948 

9 

Independence  Day 

306169255 

10 

Skth  Sense,  The 

293501675 

11 

Empire  Strikes  Back,  The 

290266497 

12 

Home  Alone 

285761243 

13 

JAWS  (1975) 

260000000 

14 

Batman 

251188924 

15 

Men  in  Black 

250690539 

DE3DDGBB 

AJAX  suggestions  with  search  terms  highlighting 

Now  our  journey  is  complete.  Let  us  look  back  once  more 
at  our  creation  in  its  full  glory.  Script,  Style  and  HTML. 
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Script:  script.js 

var  dataLoader; 
var  data; 

var  dataLength  =  0; 

var  itemsPerPage  =  10; 

var  noOf Pages  =  0; 

var  movieTable; 

var  currentPage  =  0; 

var  noOf Suggestions  =  6; 

function  createAJAXObject ( )  { 

var  httpReq; 

try  { 

httpReq  =  new  XMLHttpRequest ( )  ; 

} 

catch   (e)  { 
try  { 

httpReq  =  new  ActiveXObject ("Msxml2 . 

XMLHTTP" ) ; 

} 

catch    (e)  { 
try  { 

httpReq    =  new 
ActiveXObject ("Microsoft . XMLHTTP" ) ; 
} 

catch   (e)  { 

return  false; 

} 

} 

} 

return  httpReq; 

} 


function  loadData ( ) { 

dataLoader  =  createAJAXObject ()  ; 
dataLoader . onreadystatechange  =  onData- 

Load; 

dataLoader . open ( 'GET' ,      'movies . xml' , 

true) ; 

dataLoader . send (null) ; 
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function  onDataLoad ( ) { 

if    (dataLoader . readyState   !=  4) 
return; 

if    (dataLoader . status    !=  200   &&  dataLo- 
ader. status    !=  0) 
return; 

data   =   dataLoader . responseXML . documen- 
tElement . getElementsByTagName ( 'movie' ) ; 

movieTable   =  document . getElementByld ( 'm 

ovies' ) ; 

dataLength  =  data. length; 
noOf Pages  =  data. length  /  itemsPerPage; 
generatePageOptions (5,    50,    5) ; 
changeltemsPerPage ( ) ; 


function  generatePageOptions ( from,  to, 
step) { 

ippSelect  =  document . getElementByld ( 'ite 
msPerPage' ) ; 

for    (i  =  from;   i  <=  to;   i  +=  step)  { 

var     newElem     =  document. 
createElement ("option") ; 

newElem.text  =  i; 

newElem. value  =  i; 

ippSelect . options . add (newElem)  ; 

} 

> 

function  gotoPage (direction) { 

newpage  =  currentPage  +  direction; 
if    (newpage  <  noOf Pages  &&  newpage  >=  0) 
displayPage (newpage)  ; 

} 

function  changeltemsPerPage () { 

itemsPerPage  =  Number (document . getElemen 
tById( 'itemsPerPage' ) .value) ; 

noOf Pages  =  Math . ceil (dataLength  /  item- 
sPerPage) ; 

displayPage (0) ; 
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buildNavMenu () ; 

} 

function  displayPage (pagenum) { 
if    (pagenum  ==  -1) 

pagenum  +=  noOf Pages; 
currentPage  =  pagenum; 
startltem  =  pagenum  *  itemsPerPage; 
endltem  =   (startltem  +  itemsPerPage); 
if    (endltem  >  dataLength) 

endltem  =  dataLength; 

while    (movieTable . rows . length  >  1) 
movieTable . deleteRow ( 1 )  ; 

for    (i  =  startltem;   i  <  endltem;   i++)  { 
newrow  =  movieTable . insertRow (-1 )  ; 
newrow . insertCell (-1 ) . innerHTML  = 
data  [  i ]  . getElementsByTagName ( 'rank'  )  [0]  .text- 
Content; 

newrow . insertCell (-1 ) .innerHTML  = 
data  [ i ]  . getElementsByTagName ( 'name'  )  [ 0 ]  . text- 
Content; 

newrow . insertCell (-1 ) .innerHTML 
=  datafi] . getElementsByTagName ( 'earning' ) [0] . 
textContent; 

imdbsearch  =  "http://www.imdb.com/ 
f ind?s=tt&q="  +  unescape (data [i] . getElementsByT 
agName ( 'name' ) [0] .textContent); 

newrow . ondblclick  =  new  Function ( 'window, 
location  =  "'   +  imdbsearch  +   '"  ;'); 

} 

} 

function  buildNavMenu () { 

navMenu  =  document . getElementByld ( 'navMe 
nu' ) . rows [0 ] ; 

navMenu . innerHTML  =  "; 

for    (i  =0;    i  <  noOfPages;   i++)  { 

newcell  =  navMenu . insertCell (-1 )  ; 
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newcell . innerHTML  =  i  +  1; 

newcell . onclick     =  new 
Function ( "displayPage ( "  +  i  +  ");"); 


function  getSuggestions ( )  { 

searchtext  =  document . getElementByld ( 1 su 
ggestfield' ) .value; 

document . getElementByld ( ' suggestionsPane 
'). style . display  =  'block'; 

document . getElementByld ( 'suggestions'  ) . 
innerHTML  =    "  ; 

for    (i  =  0;   i  <  dataLength;   i++)  { 
a  =  new  String (); 

a . replace ( searchtext,  "<span 
class='match' >"  +  searchtext  +  "</span>") 

if      (data [i] . textContent . 
indexOf (searchtext)    >  -1)  { 

newrow  =  document . getElementByl 
d(  'suggestions' )  . insertRow (-1 ) ; 

newrow . insertCell (- 
1) .innerHTML  =  data [i ]  . getElementsByTagName ( 'r 
ank' ) [0] . textContent . replace ( searchtext,  "<span 
class='match' >"  +  searchtext  +  "</span>"); 

newrow . insertCell (- 
1) .innerHTML  =  data [ i ] . getElementsByTagName ( 'n 
ame' ) [0] . textContent . replace ( searchtext,  "<span 
class='match' >"  +  searchtext  +  "</span>"); 

newrow . insertCell (-1 ) .innerHT- 
ML =  data [i] .getElementsByTagName ( 'earning' ) 
[0]  .  textContent . replace ( searchtext ,  "<span 
class='match' >"  +  searchtext  +  "</span>"); 

imdbsearch  =  "http://www.imdb. 
com/f ind?s=all&q="  +  unescape (data [i ] . getElemen 
tsByTagName ( 'name' ) [0] .textContent); 

newrow. onclick  =  new  Function ( 'window . 
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location  =  "'   +  imdbsearch  +   ' "   ; ' ) ; 
} 

if    (document . getElementBy Id ( 'suggest 
ions') .rows. length  >  noOf Suggestions) 
break; 

} 

} 


HTML:  index.html 

<html> 
<head> 

<title>My  AJAX  App</title> 
<script    type="text/ j avascript"  src="script. 
js"> 

</ script> 

<link  href ="style . ess"    rel=" stylesheet" 
type="text/css"  /> 
</head> 

<body  onload="loadData () "> 

<p>Quick  look  into  the  database:  <input 
id=" suggest field" 

type="text"  onkeyup="getSuggestions () " 
onblur="hideSuggestions () "  /></p> 

<div        id=" suggestionsPane " 
cl as s=" suggest ions Pane "> 
Suggestions : 
<hr  /> 

<table  width="500"  border="0"  cellpad- 
ding="0"  cellspacing="0" 

id=" suggestions "> 
<tr> 
<td> 
</td> 
</tr> 
</table> 
</div> 

<p>No    of    items    to    display   per  page: 
<select  id=" itemsPerPage" 

onchange="change!temsPerPage () "> 
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</selectx/p> 
<table   width="500"   border="0"  cellpad- 
ding="0"  cellspacing="0" 
id="movies"> 
<tr> 

<th  scope="col">Rank</th> 
<th  scope="col">Name</th> 
<th  scope="col">Earning</th> 
</tr> 
</table> 

<table  class="navmenu"> 
<tr> 

<td  onclick="displayPage (0) ">f irst</td> 
<td  onclick="gotoPage (-1) ">previous</td> 
<td  onclick="gotoPage (1) ">next</td> 
<td  onclick="displayPage (-1) ">last</td> 
</tr> 


</table> 

<table  class="navmenu"  id="navMenu"> 
<tr> 
<td> 
</td> 
</tr> 
</table> 
</body> 
</html> 


Style:  style.css 

.  navmenu  td{ 

border:   thin  solid  #333; 
background-color:  #666; 
color:  #FFF; 
cursor:  default; 


.navmenu  td: hover { 
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border:   thin  solid  #333; 
background-color:  #333; 
color:  #FFF; 
cursor:  default; 


} 


#movies  th  { 

color:  #000; 
background-color:  #CCC; 
margin-right:  5px; 
margin-left:  5px; 
padding-right:  5px; 
padding-left:  5px; 
border-top-style :  solid; 
border-top-width:  thin; 
border-top-color:  #000; 
border-bottom-color:  #000; 
border-right-style:  solid; 
border-left-style:  solid; 
border-right-color:  #FFF; 
border-left-color:  #FFF; 
border-right-width:  thin; 
border-left-width:  thin; 

} 


#movies  td  { 

color:  #000; 
padding-top:  Opx; 
padding-bottom:  Opx; 
margin-top:  Opx; 
margin-bottom:  Opx; 
background-color:  #ddd; 
border-top-width:  thin; 
border-bottom-width:  thin; 
border-top-style:  solid; 
border-bottom-style:  solid; 
border-top-color:  #999; 
border-bottom-color:  #999; 
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.match 
{ 

background-color:  #00ffff; 


#suggestionsPane  { 
color:  #000; 
background-color:  #FFF; 
display:  none; 
width:  500px; 
position:  absolute; 
border-top-width:  medium; 
border-right-width:  medium; 
border-bottom-width:  medium; 
border-left-width:  medium; 
border-top-style :  solid; 
border-right-style:  solid; 
border-bottom-style:  solid; 
border-left-style:  solid; 
border-top-color:  #CCC; 
border-right-color:  #333; 
border-bottom-color:  #333; 
border-left-color:  #CCC; 
cursor:  default; 
top:  25px; 


} 


#suggestionsPane  tr{ 

border-top-width:  thin; 
border-right-width:  thin; 
border-bottom-width:  thin; 
border-left-width:  thin; 
border-top-style:  solid; 
border-right-style:  none; 
border-bottom-style:  solid; 
border-left-style:  none; 
border-top-color:  #666; 
border-right-color:  #666; 
border-bottom-color:  #666; 
border-left-color:  #666; 
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} 

#suggestionsPane  tr: hover { 
background-color:  #888 


5.4  Conclusion 

Now  that  you  have  developed  in  AJAX  yourself,  you  under- 
stand what  all  the  fuss  is  about.  With  a  simple  and  free  text 
editor,  you  can  create  powerful  web  applications  that  touch 
the  bounds  of  interactivity.  Never  be  shy  in  exploring  how  a 
site  works.  Go  ahead  and  press  [Ctrl]  +  [u]  to  see  the  code 
in  all  its  glory.  Download  all  the  attached  scripts  you  find  on 
web  sites  and  see  what  they're  doing,  and  how. 

You  can  use  the  FireBug  add-on  for  Firefox  to  see  live  code 
in  action,  make  changes  on  your  code  on  the  fly,  and  see  how 
it  works  out.  The  best  thing  about  the  web  is  that  almost 
everything  is  in  pure  text,  so  you  need  nothing  more  than  a 
browser  and  text  editor  to  experiment. 

Even  if  you  don't  plan  to  become  a  full-fledged  web  devel- 
oper, the  pure  joy  you  get  in  coding  something  for  the  web  is 
worth  it.  Entire  communities  are  available  online  dedicated 
to  helping  out  new  developers.  So  go  ahead  and  bring  your 
unique  perspective  to  the  web. 

Here  we  leave  you  off,  hopefully  with  enough  acceleration 
towards  AJAX  to  break  through  as  a  web  developer.  However, 
this  is  not  the  end  —  keep  playing  and  experimenting! 
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JavaScript 
Frameworks 


6.1  Introduction 

In  the  last  section,  we  developed  a  simple  and  small  naviga- 
tion interface  for  a  movie  database  that  could: 

•  Display  the  data  in  pages 

•  Allow  the  user  to  select  the  size  of  pages 

•  Navigate  to  any  page  directly 

•  Navigate  using  back  and  forward  buttons 

•  Show  suggestions  when  you  start  typing  a  movie  name 

•  Highlight  the  occurrences  of  your  search  terms  in  the  sug- 
gestions 

A  lot  of  what  we  did  is  functionality  that  many  applica- 
tions share.  Any  application  that  has  a  lot  of  data  will  display 
it  in  pages  and  will  probably  give  you  control  over  how  much 
data  is  displayed.  Unless  the  number  of  pages  is  high,  such 
applications  will  also  show  page  numbers. 

Auto-suggestion  is  also  a  very  popular  feature.  You  can 
see  them  when  you  start  typing  a  friend's  name  in  Gmail, 
or  a  search  term  in  Google  Suggest.  Search  highlighting  is 
also  prevalent  in  most  sites  that  provide  search  facility.  These 
are  some  very  common  things  that  people  do  with  AJAX  and 
JavaScript.  As  such,  there  are  many  ready-to-use  code  libraries 
available  for  performing  repetitive  tasks. 

These  libraries  take  the  major  job  off  your  hands.  You  no 
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longer  need  to  focus  on  bringing  your  web  site  up  to  par  with 
standards  —  you  need  only  to  make  it  better. 

6.2  A  comparison  of  frameworks 

Since  different  frameworks  have  completely  different  ways  of 
doing  the  same  tasks,  it's  impossible  to  learn  them  all  here. 
Most  frameworks  aim  to  achieve  the  same  results.  So  the  dif- 
ference between  them,  is  how  they  can  be  used,  their  size, 
their  speed,  etc. 

Every  framework  tries  to  give  the  developer  a  unique  way 
of  dealing  with  the  same  tasks,  and  thus  learning  each  one 
is  a  different  experience.  While  many  try  to  do  everything 
entirely  in  JavaScript,  others  allow  you  to  use  special  markup 
in  your  page  to  accomplish  powerful  feats.  Going  into  details 
about  all  frameworks  is  not  possible,  as  each  could  take  up  a 
book  its  own  right,  instead  we  will  give  an  overview  of  the  dif- 
ferent frameworks  available,  and  the  facilities  they  provide: 


•   Dojo  toolkit 

This  is  one  of  the  most  popu- 
lar, free  and  open-licensed  toolkits 
for  JavaScript.  It  also  has  some 
features  for  backend  /  server-side 
integration  with  its  code.  This 
library  is  also  well  supported  by 
major  development  platforms.  It 
is  integrated  with  newer  versions  for  the  Zend  PHP  platform. 
The  features  provided  by  this  toolkit  as  listed  by  their  web  site 
are  listed  below. 

It  is  available  in  three  parts: 

•  Core:  This  provides  basic  JavaScript  features  such  as 

•  Browser  detection 

•  JSON  encoding  /  decoding 

•  Powerful  AJAX  support 

•  Animation  support 

•  Asynchronous  programming  support 

•  CSS  style  and  positioning  utilities 

•  Object-oriented  programming  (OOP)  support 

•  Drag-and-drop 
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•  Localisations 

•  Date,  Number  formatting 

•  String  utilities 

•  Progressive-enhancement  behaviour  engine 

•  Cookie  handling 

•  dijit:  This  is  collection  of  widgets,  i.e.  individual  compo- 
nents of  HTML  and  JavaScript  code  that  can  be  used  anywhere. 
The  widgets  can  easily  be  themes  so  that  they  blend  in  with 
your  web  site.  It  provides  the  following  widgets: 

•  Menus,  tabs  and  tooltips 

•  Sortable  tables,  dynamic  charts  and  2-D  vector 
drawings 

•  Tree  widgets  that  support  drag-and-drop 

•  Various  forms  and  routines  for  validating  form 
input 

•  Calendar-based  date  selector,  time  selector,  and 
clock 

•  dojoX:  This  is  a  library  for  advanced  data  visualisa- 
tion components  such  as  charts  and  bar-graphs.  It  also  has 
components  for  vector  drawing,  galleries,  etc.  It  even  provides 
facilities  to  make  your  application  work  better  offline,  using 
Google  Gears. 


«    1. 1  *  m  1  slxi  v.  *  1 1=  ;=  -s 

~hrs  is  jus!  a  s  j        ■"■ssssze.  Tr.g.-s  s  s~,j.. '-success  Su  :i>co  -'p'&:s  ■■■  ihe  to.  fie/d. 


.  ssage#1  ®     New  Message  #2         Neur  Message  #3       ■  Mem  Message  #4  ©| 


j  <t  Send  |  |  0  Cancel  | 
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•  Ext 

This  is  a  powerful  library  for  building  rich  GUIs.  It  uses 
AJAX  in  its  core  for  data  communication,  synchronisation, 
etc.  The  latest  version,  according  to  their  web  site,  provides 
widgets  for: 

•  Text  field  and  text  area  input  controls 

•  Date  fields  with  a  pop-up  date-picker 

•  Numeric  fields 

•  List  box  and  combo  boxes 

•  Radio  and  checkbox  controls 

•  HTML  editor  control 

•  Grid  control 

•  Tree  control 

•  Tab  panels 

•  Toolbars 

•  Desktop-application-style  menus 

•  Region  panels  to  allow  a  form  to  be  divided  into  mul- 
tiple sub-sections 

•  Sliders 
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•  jQuery 

A  truly  unique  and  very  powerful  library,  and  also  one  of  the 
most  popular  ones,  is  jQuery.  It  is  used  even  by  organisations 
such  as  Google,  IBM,  Twitter  and  Amazon.  Microsoft  will 
incorportate  this  as  a  web  development  library  for  Visual 
Studio,  and  Nokia  as  a  web  runtime. 

Its  power  lies  in  its  very  simplicity,  as  the  most  used  and 
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v£  jQuenf 

"       write  toss,  do  more. 


powerful  compo- 
nent provides  is  a 
simple  '$'  function. 
It  includes  interac- 
tions for  making 
elements  draggable,  droppable,  resizable,  selectable  and  sort 
able.  It  also  provides  some  widgets  for  Accordion,  Datepicker, 
Dialog,  Progressbar,  Slider  and  Tabs.  It  also  supports  theming 
and  effects. 

•  MooTools 

Don't  let  the  name  mislead  you!  This  is  a  very  powerful, 
object-oriented  framework,  and  is  modular  in  its  very  essence. 
You  need  not  include  the  entire  library  if  you  will  only  use  a 
part.  In  fact,  their  web  site  allows  you  to  choose  what  compo- 
nents you  want  to  include  in  your  library,  and  it  will  include 
only  those  in  your  download. 

This  kind  of  modularity  is  not  unique  to  this  library; 
however,  it  provides  a  much  more  fine  grained  control  than 
most  libraries. 

The  library  itself  is  divided  into  two  libraries:  Core  and 
More.  The  core  library  as  its  name  suggests  has  basic  features, 


while  the  More 
library  has  more 
advanced  compo- 
nents. According  to 
their  web  site  their 


IT1COIDQ: 


History 

Evidence  oT universal  common  descent 
Common  biochemistry  and  genetic  code 

Examples  of  common  descent 
Artificial  selection 

Artificial  selection  offers  remarkable  examples  of  the  amount  of  diversity  that  can  exist  between  individuals  snaring  a  late  common 
ancestor.  To  perform  artificial  selection,  one  begins  with  a  particular  species  (following  examples  include  wolves  and  wild  cabbage}  and 
then,  at  every  generation,  only  allow  certain  individuals  to  reproduce,  based  on  the  degree  to  which  they  exhibit  certain  desirable 
characteristics.  In  time,  it  is  expected  that  these  characteristics  become  Increasingly  well-developed  in  successive  generations.  Many 
examples  of  artificial  selection,  like  the  ones  below,  occurred  without  the  guidance  of  modern  scientific  insight. 

Dog  breeding 

.An  obvious  example  of  the  power  of  artificial  selection  is  the  diversity  found  in  various  breed  in 
domesticated  dogs.  The  various  breeds  of  dogs  all  share  common  ancestry  (being  all  ultimately 
descended  from  wolves}  but  were  domeslicaled  by  humans  and  then  selectively  bred  in  order  lo 
enhance  various  features  such  as  coal  color  and  length  or  body  size.  To  see  the  wide  range  of 
difference  between  the  many  breeds  of  dogs  compare  the  Chihuahua,  Great  Dane.  Basset  Hound,  Pug, 
and  Poodle.  Also  compare  this  enormous  diversity  with  the  relative  uniformity  of  wild  wolves. 
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feature  set  is  as  follows: 


The  Core  library  has  the  following  modules: 

Core:  Provides  core  features  used  by  the  rest  of  the 
library 

Native:  Provides  features  to  work  with  JavaScript 
native  data  types  of  Array,  Function,  Number,  String, 
Hash  and  Event 

Class:  Provides  features  to  ease  working  with  classes 
you  create  or  extend.  It  has  the  modules  Class  and 
Class. Extras 

Element:  Contains  powerful  modules  to  manipulat- 
ing HTML  elements.  It  contains  the  modules  Element, 
Element.Event,  Element.Style,  Element.Dimensions 
Utilities:  Some  miscellaneous  utilities  for  CSS,  JSON 
coding,  cookies,  flash  files,  etc.  it  has  the  modules 
Selectors,  DomReady,  JSON,  Cookie,  Swiff 
Fx:  Effects  and  transition  libraries,  composed  of  Fx, 
Fx.CSS,  Fx.Tween,  Fx.Morph,  and  Fx.Transitions 
Request:  Provides  features  for  easy  working  with 
Ajax  using  XML,  HTML  or  JSON.  Consists  of  Request, 
Request.HTML,  Request.JSON 


Fx. Slide,    Fx. Scroll, 


The  More  library  consists  of: 

Fx:    More    effects  using 
Fx.Elements 

Drag:  Support  for  drag-and-drop  operations  using 
Drag,  Drag.Move 

Utilities:  More  utilities,  for  handling  cookies,  colours, 
events  and  assets.  Composed  of  the  modules  Hash. 
Cookie,  Color,  Group,  Assets 

Interface:  Interface  elements  and  widgets  such  as 
Sortables,  Tips,  SmoothScroll,  Slider,  Scroller  and 
Accordion 


Prototype  and  script.aculo.us 

Prototype  is  a  JavaScript  frame- 
work, and  script.aculo.us  is 
an  add-on  for  the  framework. 
Prototype's  major  strengths  com- 
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pared  to  other  frameworks  are  its  features  for  creating  classes, 
and  extensions  to  DOM.  script.aculo.us  adds  animation  and 
effect  features  to  Prototype. 

•  The  Yahoolll  library 

This  is  a  free  open  source  library  provided  by  Yahoo!  for  devel- 
opers. Furthermore,  it 
is  under  a  non-restric- 
tive licence,  so  you 
are  free  to  modify  and 
distribute  it.  It's  very 
powerful,  and  supports 
many  features.  Similar 
to  other  libraries,  it  is 
also  quite  modularised. 
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The  features  as  listed  by  the  Yahoo  UI  JavaScript  library  are  as 
follows: 

•  YUI  Core:  The  YAHOO  Global,  DOM  Collection,  Event 
Utility 

•  YUI  Library  Utilities:  Animation  Utility,  Browser 
History  Manager,  Connection  Manager,  Cookie  Utility, 
DataSource  Utility,  Drag  and  Drop  Utility,  Element 
Utility,  Get  Utility,  ImageLoader  Utility,  JSON  Utility, 
Resize  Utility,  Selector  Utility,  Stylesheet,  Utility 
beta,  The  YUI  Loader  Utility. 

•  YUI  Library  Controls/Widgets:  AutoComplete,  Button, 
Calendar,  Carousel,  Charts,  Color  Picker,  Container, 
DataTable,  ImageCropper,  Layout  Manager,  Menu, 
Paginator,  Rich  Text  Editor,  Slider,  Tab  View,  TreeView, 
Uploader. 

•  YUI  Library  CSS  Tools:  CSS  Reset,  CSS  Base,  CSS 
Fonts,  CSS  Grids. 


•  Spry 

If  you've  used  a  recent  version  Adobe  Dreamweaver,  you 
will  notice  that  it  provides  UI  components  and  AJAX  fea- 


tures using  this 
library.  Spry  is 
a  free  and  open 
source  library 
developed  by 
Adobe.  It  comes 


AJAX 


integrated  with 
Dreamweaver 
CS3,  and  CS4. 

Spry  is  more  designer  centric,  and  provides  features 
that  are  implemented  partly  in  the  HTML  code  and  partly  in 
JavaScript.  It  too  is  very  modularised,  with  modules  such  as 
Spry  Effects,  Spry  Data  and  Spry  Widgets. 

Even  if  you  are  not  using  Dreamweaver  you  can  down- 
load and  use  this  library  with  any  other  web  development 
environment.  In  the  next  section,  we  will  use  this  library  to 
make  port  the  application  we  made  in  the  last  few  chapters 
to  Spry. 
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Deciding  which  library  to  use  for  your  next  application 
can  be  a  daunting  task,  especially  if  you  consider  that  once 
the  choice  is  made  you  will  have  to  stick  to  it  for  quite  some 
time.  The  path  you  take  while  developing  your  application 
becomes  dependant  on  the  path  taken  by  the  library  it  imple- 
ments. Features  and  flexibility  are  important;  however,  it 
is  always  better  to  go  for  a  framework  that  is  actively  main- 
tained, otherwise,  you  may  be  left  with  an  application  that 
has  as  many  bugs  as  the  library  it  uses. 

In  the  next  section,  we  take  a  look  at  how  one  would 
develop  the  movie  database  we  made  in  the  last  section,  using 
Spry. 

6.3  Using  Spry:  Reworking  our  old 
example 

Although  it  is  impossible  to  touch  all  the  different  frame- 
works, looking  at  how  you  can  develop  using  one  is  a  good 
idea.  We  will  now  try  to  rebuild  the  movie  database  using 
Spry.  Since  this  is  meant  only  to  be  a  peek,  we  will  not  discuss 
the  features  of  Spry  in  detail,  nor  will  we  see  how  the  Spry 
part  of  the  code  works.  Instead,  let  us  focus  on  how  to  get 
similar  functionality  using  Spry. 

If  you're  using  Dreamweaver  or  Aptana  you're  all  set,  as 
Spry  is  included,  otherwise,  you  can  get  it  from  the  Digit  DVD, 
or  online  from:  http://labs.adobe.com/technologies/spry/home.html 

This  time  around,  we'll  just  jump  straight  to  the  code  and 
see  how  Spry  does  things. 

<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0 
Transitional/ /EN" 

"http : //www . w3 . org/TR/xhtmll/DTD/xhtmll- 
transitional . dtd"> 

<html  xmlns : spry="http ://ns. adobe . com/ spry/ " 

xmlns="http : //www . w3 . org/1999/xhtml"> 
<head> 

<title>My  Aj ax  App</title> 
<script    src="lib/xpath . j s"    type="text/ javas- 
cript'^ 

</ script> 
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<script      src="lib/SpryData . j s"  type="text/ 

S 
T 

javascript"> 

T 

</ script> 

R 

<script  src=" lib/SpryPagedView .  j  s"  type="text/ 

A 
C 

javascript"> 

K 

</ script> 

<script           src  =  "lib/ Spr yAut oSugges t . j  s " 

T 

n 
u 

type="text/ javascript"> 

A 

</ script> 

J 

<link    href ="lib/ SpryAutoSuggest .ess" 

A 

re 1=" stylesheet" 

X 

type="text/css"  /> 

<link  href ="style . ess"  rel="stylesheet" 

type="text/css"  /> 

<script  type="text/ javascript"> 

< !  — 

var    moviesds    =    new    Spry. Data. 

XMLDataSet ( "movies . xml" ,    "movies/movie") ; 

moviesds . setColumnType ( "rank"  ,  "num- 

ber") ; 

moviesds . setColumnType ("earning",  "num- 

ber" )  ; 

var     suggests    =    new    Spry. Data. 

XMLDataSet ( "movies . xml" ,    "movies/movie") ; 

var    moviesPage    =    new    Spry. Data. 

PagedView (moviesds,  { 

pageSize:  5 

}); 

function  generatePageOptions ( f rom,  to, 

step) { 

ippSelect  =  document . getElementByl 

d(  'itemsPerPage'  ) ; 

for   (i  =  from;   i  <=  to;   i  +=  step) 

{ 
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var    newElem   =  document. 
createElement ("option") ; 

newElem.text  =  i; 
newElem. value  =  i; 

ippSelect . options . 

add (newElem) ; 


} 


} 


II  — > 

<l  script> 
</head> 

<body    onload="generatePageOptions (5,50,5) 

> 

<div  id="suggestionsPanel"> 

<input   id="suggestf ield"  type="text" 


/> 


<div  id=" suggestions'^ 

<table   border="0"  cellpadding="0" 
cell spacing=" 0 " 

spry: region="suggests"> 

<tr  spry: repeat="suggests"  spry: 
suggest=" {name } "> 

<td>{rank}</td> 


<td>{name}</td> 
</tr> 
</table> 
</div> 
</div> 


<p>No    of    items    to    display   per  page: 
<select  id=" itemsPerPage" 

onchange="moviesPage . setPageSize (this  . 

value) "> 

</selectx/p> 
<table  width="500"  border="0"  cellpadding="0" 


f!M\  FAST  TRACK 


109 


E 

|  JAVASCRIPT  FRAMEWORKS^ 

www.thinkdigit.com 

F 

A 

cellspacing="0" 

S 

spry : region= "movies Page "> 

T 

<tr> 

T 

<th  scope="col"  onclick= 

"moviesPage . 

R 

sort ( 'rank' ) ">Rank</th> 

A 

c 
L 

<th  scope="col"  onclick= 

"moviesPage . 

K 

sort  (  'name' ) ">Name</th> 

T 

<th  scope="col"  onclick= 

"moviesPage . 

0 

sort  (  'earning' ) ">Earning</th> 

A 

</tr> 

J 

A 
A 

<tr  spry : repeat="moviesPage 

X 

<td>{rank}</td> 

<td>{name}</td> 

<td> { earning } </ td> 

</tr> 

</table> 

<table  class="navmenu"> 

<tr> 

<td  onclick= 

lUUVicordyc  . 

firstPage () ">first</td> 

<td  onclick="moviesPage . 

previous  Page 

() ">previous</td> 

<td  onclick= 

"  mr\i  t  i  oofs  (~ro 
IlIU  Vic  or  ay  c  ■ 

nextPage ( ) ">next</td> 

<td  onclick= 

"moviesPage . 

lastPage ( ) ">last</td> 

</tr> 

</table> 

<script  type="text/ javascript"> 

<!  — 

var   suggestWidget  =  new 

Spry .Widget . 
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AutoSuggest ("suggestionsPanel",  "suggestions' 
"suggests",    "name",  { 

hoverSuggestClass :  'hover', 

minCharsType :  0, 

containsString :  false, 

maxListltems :  0 

})  ; 


</ script> 
</body> 
</html> 

Spry  is  a  huge  and  complicated  JavaScript  library,  the 
entire  code  for  Spry  would  probably  fill  up  a  book  as  large  as 
this!  So  let's  leave  that  out. 

We'll  start  with  the  <head>  tag.  The  things  you'll  notice 
are,  the  new  scripts  that  have  been  added:  xpath.js,  SpryData. 
js,  SpryPagedView.js  and  SpryAutoSuggest.js,  also  included  is 
a  new  stylesheet  SpryAutoSuggest.css. 

A  little  about  what  each  of  these  does: 

•  xpath.js 

XPath  is  a  way  of  getting  data  from  an  XML  file.  It  is 
similar  a  looking  at  an  XML  file  like  a  folder  and  file 
structure.  So  if  you  have  the  following  segment  of  XML 
code: 

<movies> 

<movie> 

<rank>2</ rank> 

<name>STAR  WARS    ( 1 977 ) </name> 
<earning>4  60988007</earning> 
</movie> 
</movies> 

The  XPath  to  get  "STAR  WARS  (1977)"  would  be  "mov- 

ies/movie/name".  For  a  larger  lists  such  as: 

You  can  retrieve  a  list  of  all  movies  by  using  "movies/ 

movie". 

This  file  provides  this  functionality  to  the  framework, 
but  is  not  directly  used  in  our  app. 


BED  FAST  TRACK 


111 


E 


JAVASCRIPT  FRAMEWORKS 


www.thinkdigit.com 


•  SpryData.js 

This  is  a  file  for  loading  and  manipulating  data.  It  is 
the  one  responsible  for  performing  the  Asynchronous 
loading  of  our  'movies.xml'  file,  and  sorting  it. 

•  SpryPagedView.js 

To  divide  the  data  in  pages  as  we  do  in  our  app,  the 
features  provided  by  Spry's  PagedView  come  in  handy. 
It  allows  us  to  divide  the  data  in  pages  of  any  size  we 
want,  and  navigate  them  with  ease. 

•  SpryAutoSuggest.js 

This  JavaScript  file  is  a  widget  which  provides 
AutoSuggest  functionality  like  the  suggestions  we  used 
in  out  app. 

Note  that  only  in  features  that  lie  in  context  of  what  we 
are  trying  to  do  here,  have  been  listed.  These  files  are  capable 
and  responsible  for  doing  much  more! 

Moving  down  into  the  final  script  block  we  see  the  code 
segment: 

You  will  recognise  the  'genera tePageOptions'  function 
from  our  old  example,  and  it  is  untouched.  However,  the  rest 
of  the  code  warrants  an  explanation. 


•  var  moviesds  =  new  Spry. Data. 
XMLDataSet ( "movies . xml",  "movies/movie") ; 
This  is  the  first  time  we  are  actually  using  Spry  code. 
Here  we  use  the  'XMLDataSet'  feature  provided  by  Spry 
to  load  the  'movies.xml'  file,  and  retrieve  the  list  of  all 
movies  from  it.  The  first  parameter  is  the  name  of  the 
file  to  load,  and  the  second  is  the  XPath  to  the  data 
that  we  want.  We  want  a  list  of  all  the  movies,  and  as 
such  we  use  the  XPath  "movies/movie".  This  data  set 
that  we  finally  get  is  stored  in  the  variable  'moviesds'. 

•  moviesds . setColumnType ( "rank" ,  "number"); 
moviesds . setColumnType ( "earning" ,  "num- 
ber") ; 

Here  we  tell  the  Spry  how  to  treat  the  loaded  data. 
We  tell  it  that  the  'rank  '  and  'earning'  columns  are 
numbers.  We  can  do  without  this  if  we  want,  but  it  is 
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better  if  we  include  it,  as  this  allows  better  sorting  of 
the  data. 

Numbers  are  sorted  as  1,2,3,10,11,100;  however  the 
same  if  treated  as  text  would  sort  as  '1',  '10',  '11',  '100', 
'2',  '3'.  Hence  by  telling  Spry  what  the  data  is,  we 
ensure  that  it  is  handled  the  right  way. 

•  var        suggests        =        new        Spry. Data. 
XMLDataSet ( "movies . xml",    "movies/movie") ; 
This  is  another  data  set.  This  is  to  provide  data  to  the 
AutoSuggest  feature.  As  you  can  see,  it  is  using  the 
same  data  as  'moviesds'. 

•  var       moviesPage       =       new       Spry. Data. 

PagedView (moviesds, 
{ 

pageSize:  5 
})  ; 

The  'Spry.Data.PagedView'  object  enables  us  to  break 
down  the  data  that  we  are  showing  in  the  app,  into 
pages.  We  provide  it  two  parameters  —  the  first  is  the 
name  of  the  dataset  that  we  wish  to  'page',  and  the  sec- 
ond are  a  list  of  options  based  on  which  the  'breaking' 


S  o  of  items  to  display  per  page:  1 10  "  1 

Rank 

Name 

Earning 

1 

Titanic 

600788188 

2 

STAR  WARS  (1977) 

460988007 

3 

Star  Wars:  Episode  I:  Tie  Phantom  Menace 

431088295 

4 

E.T.  THE  EXTRA-TERRESTRIAL  (1982) 

399804539 

5 

Jurassic  Park 

357067947 

6 

FORREST  GUMP  (1994) 

329694499 

7 

Lion  King,  The 

312855561 

S 

Return  of  the  Jedi 

309153948 

9 

Independence  Day 

306169255 

10 

Sixth  Sense,  The 

293501675 

Our  old  app,  now  using  spry 
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E.T.  THE 


EXTRA- TERSE S TRIAL  (1982) 
1 1  Empire  Strikes  Back.  The 
57Exorcist.  The  


No  of  items  to  display  per  page:  |  ID  T| 


Rauk 

>atue 

Earning 

1 

Titanic 

600788188 

2 

STAR  WARS  (1977) 

460988007 

3 

Star  Wars:  Episode  I:  The  Phantom  Menace 

431088295 

4 

E.T.  THE  EXTRA-TERRESTRIAL  (1982) 

399804539 

5 

Jurassic  Park 

357067947 

6 

FORREST  GUMP  (1994) 

329694499 

7 

Lion  King.  The 

312855561 

8 

Return  of  the  Jecli 

309153948 

9 

Independence  Day 

306169255 

10 

Sixth  Sense.  The 

293501675 

Spry  Autosuggest  at  work 

will  be  done.  We  are  just  setting  one  option,  'pageSize' 
which  represents  the  no  of  items  in  each  page.  We  are 
using  a  value  of  '5'  like  our  original  app. 


While  we  are  looking  at  the  scripts,  let  us  get  another  one 
over  with,  the  one  right  at  the  bottom  of  the  page. 

<script  type="text/ javascript"> 
<!  — 

var  suggestWidget  =  new  Spry. Widget. 
AutoSuggest ( "suggestionsPanel" ,  "suggestions" , 
"suggests",    "name",  { 

minCharsType :  0, 

containsString :  false, 

maxListltems :  0 

}) ; 
— > 

</ script> 

This  is  actually  a  single  line  of  code  spread  over  multiple 
lines,  to  make  it  is  easier  to  read.  It  is  essentially  telling  Spry 
to  treat  the  html  element  with  the  id  'suggestionsPanel'  as 
the  suggestions  widget.  The  second  parameter  is  the  element 
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which  will  show  the  suggestions,  in  our  case  that  would  be  the 
<div>  with  the  id  "suggestions".  The  third  parameter  is  the 
name  of  the  dataset  from  which  to  get  the  results.  The  fourth 
parameter  is  the  column  of  the  dataset  in  which  to  search. 

The  final  parameter  is  a  list  of  options,  which  control  the 
functioning  of  the  feature.  Here  the  options  we  set  are: 

•  minCharsType:  This  controls  how  any  characters  need 
to  be  entered  before  the  autosuggest  starts  looking  for 
matches.  Here  we  set  it  to  0,  to  make  it  always  search. 

•  containsString:  This  setting  allows  us  to  optionally 
search  the  whole  text,  instead  of  just  the  first  few  char- 
acters. 

•  maxListltems:  This  controls  how  many  items  are  dis- 
played in  the  list.  To  list  all  items  we  set  it  to  '0'. 

That  is  all  the  code  that  is  required  in  JavaScript!  You  must 
be  thinking,  "But  we  didn't  do  anything!"  You're  right  Spry 
takes  care  of  it  all.  All  we  need  to  do  is  where  to  put  the  data, 
and  how  to  put  it  there. 

How  do  we  tell  Spry  where  to  put  the  data?  Let's  see. 
<table  width="500"  border="0"  cellpadding="0" 
cellspacing="0" 

spry : region="moviesPage"> 
<tr> 

<th  scope="col"  onclick="moviesPage . 
sort ( 'rank' ) ">Rank</th> 

<th  scope="col"  onclick="moviesPage . 
sort ( 'name' ) ">Name</th> 

<th  scope="col"  onclick="moviesPage . 
sort  (  'earning' ) ">Earning</th> 
</tr> 

<tr  spry : repeat="moviesPage"> 
<td>{rank}</td> 

<td>{name}</td> 
<td> { earning } </ td> 
</tr> 
</table> 
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The  things  to  note  here  are  the  "spry:region"  and  "spry: 
repeat"  attributes.  These  tell  Spry  how  to  hande  this  part 
of  the  page.  The  'spry:region="moviesPage'"  attribute  tells 
Spry  that  we  want  the  contents  of  this  element  to  be  pro- 
cessed by  Spry  before  being  outputted  on  the  page.  The 
'spry:repeat="moviesPage'"  attribute  tells  Spry  to  repeat 
the  contents  of  this  element  for  each  item  in  the  dataset 
'moviesPage'. 

Now  all  we  do  is  put  the  data  fields  we  want  to  output  on 
the  page  within  braces  e.g.  '{rank}'.  Spry  then  replaces  these 
with  the  actual  values  while  processing  the  page. 

Another  amazing  thing  we  have  done  in  this  app  is  some- 
thing we  didn't  do  in  the  original.  We  made  the  columns  sort- 
able!  Now  all  you  need  to  do  is  click  on  a  column  title,  and  it 
will  sort  the  column! 

How  did  we  do  this?  Simply  by  adding  an  'onclick'  attri- 
bute to  the  cells  of  the  header,  telling  Spry  to  sort  the  data. 
Take  a  look  at  the  header  tags  we  have  now: 
<th  scope="col"    onclick="moviesPage . sort ( 'earni 
ng' ) ">Earning</th> 

The  code  "moviesPage.sort('earning')"  is  a  JavaScript  func- 
tion that  sorts  the  dataset  by  the  column  'earning'  and  hence 
it  is  attached  to  the  'Earning'  column  heading.  Similarly  we 
add  sort  functions  to  the  'Rank'  and  'Name'  columns. 

The  navigation  menu  too  is  much  simpler  now.  All  the 
actions  we  need  to  perform  are  already  supported  by  Spry. 
<table  class="navmenu"> 
<tr> 

<td     onclick="moviesPage . 
firstPage () ">first</td> 

<td  onclick="moviesPage .previousPage 
() ">previous</td> 

<td     onclick="moviesPage . 

nextPage ( ) ">next</td> 

<td     onclick="moviesPage . 

lastPage ( ) ">last</td> 
</tr> 
</table> 

This  code  needs  no  explanation  since  it's  purpose  and 
action  is  fairly  evident. 
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One  final  thing  that  needs  explanation  is  how  we  facili- 
tate selecting  the  number  of  items  to  display  per  page. 

<select  id="itemsPerPage" 

onchange="moviesPage . setPageSize (this .value) "> 
</ select> 

This  is  all  that  is  required  to  change  the  number  of  items 
to  display  per  page.  The  select  box  starts  off  with  the  number 
of  items,  and  the  items  are  added  in  runtime  the  same  way 
they  were  in  our  original  app. 

When  the  value  is  changed  by  selecting  one  from  the  drop- 
down, it  fires  off  the  code  in  the  'onchange'  attribute,  which  is 
'moviesPage.setPageSize(this.value)'.  This  code  tells  the  Paging 
system  of  Spry  to  change  the  size  of  each  page  (i.e.  the  number 
of  items  displayed  per  page),  to  the  value  of  the  select  field. 

Here  we  conclude  our  experimentation  with  Spry.  Keep  in 
mind  that  this  is  just  a  small  example  of  what  Spry  is  capable  of. 


6.4  Conclusion 

Now  that  you  have  learnt  about  frameworks  and  even  used 
one  yourself.  Which  one  will  you  choose? 

Many  people  make  the  mistake  of  going  by  the  first  advice 
they  get.  You've  played  around  with  Spry  now,  and  you  may 
feel  like  it  suits  you,  or  can  do  whatever  you  want  to  do.  Don't 
go  by  what  we  say!  Make  up  your  own  mind.  Every  framework 
is  different,  look  them  up  and  see  what  they  have  to  offer. 
There  are  too  many  frameworks  out  there  to  be  listed  here, 
but  we've  tried  to  list  a  few  of  the  common  ones. 

Each  framework  is  designed  by  its  developer  to  adhere 
to  a  different  philosophy.  Some  of  the  simplest  frameworks 
sometimes  have  the  greatest  potential  and  may  surprise  you. 
J  Query,  for  example,  revolves  around  a  simple  function  named 
'$'.  However,  the  way  it  is  designed  to  operate  with  that  alone, 
makes  it  more  powerful  than  perhaps  some  of  the  most  com- 
plicated and  extended  libraries.  Spry  is  a  framework  that  even 
a  designer  can  feel  comfortable  with.  Finally,  what  you  have 
to  decide  is  which  design  philosophy  resonates  best  with  how 
you  think  and  envision  what  you  wish  to  accomplish. 
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7.1  Where  to  go  from  here 

One  thing  you  must  have  realised  is  that  there  is  still  a  lot 
more  you  can  learn  about  AJAX.  We  have  only  touched  on 
one  JavaScript  Framework,  and  have  used  only  basic  AJAX. 
The  thing  with  AJAX  though  is  that  all  you  can  really  learn 
from  others  are  examples  of  how  it  can  be  used.  It  is  merely 
a  programming  practice,  and  doesn't  have  a  fixed  syntax 
of  its  own. 

If  you're  a  web  developer  who  has  never  heard  of  AJAX 
(although  that  is  hard  to  imagine  these  days),  and  someone 
told  you  'Look,  here's  a  neat  trick,  how  about  you  load  the 
XML  data  asynchronously  using  JavaScript?',  you  could 
probably  just  jump  with  joy  and  start  coding  something 
immediately.  AJAX  is  not  a  language,  and  thus  all  you  really 
need  is  an  existing  background  in  JavaScript  programming 
to  start  using  it  immediately,  and  that  is  what  we've  tried 
to  develop  here. 

AJAX  itself  involves  the  usage  of  multiple  technologies; 
however,  combining  it  with  more  technologies  can  get  you 
even  further.  For  example,  here  are  two  technologies  that 
can  greatly  improve  a  user's  experience: 
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Adobe  AIR: 

Adobe  AIR  or  Adobe  Integrated  Runtime,  is  a  software 
development  kit  (SDK),  which  allows  you  bring  your  apps 
online.  Using  the  AIR  SDK,  you  can  make  installable 
applications  with  Flash  and  Flex  using  ActionScript,  or 
using  JavaScript  and  HTML.  It  is  integrated  well  with 
Dreamweaver,  and  all  you  need  to  do  is  to  export  your  app 
as  an  AIR  file,  and  it's  done! 

The  AIR  SDK  is  available  for  free  from  Adobe's  web 
site  and  it  would  do  you  well  to  check  it  out.  It's  truly 
encouraging  to  know  that  even  if  you've  only  done  web 
development,  you're  not  limited  to  the  web  alone,  and  all 
the  work  you  put  in  on  your  site,  can  be  reused  to  bring 
the  same  functionality  offline. 


Google  Gears: 

Google  Gears  gives  developers  another  way  of  bringing  an 
app  offline.  It  is  not  a  competitor  for  AIR,  it  is  quite  a  dif- 
ferent product  and  accomplishes  different  goals. 

If  you've  used  Google  Docs,  you  will  notice  that  they 
provide  a  facility  to  use  the  website  even  when  offline,  via 
a  small  link  saying  'Offline'  in  the  top  right  corner  of  the 
page.  If  you've  never  used  it,  here's  what  it  does:  it  allows 
you  to  use  Google  Docs,  even  when  you're  disconnected 
from  the  internet.  You'll  still  have  all  the  same  functional- 
ity, but  you  will  be  able  to  do  everything  you  do  in  Google 
Docs,  such  as  create  a  new  document,  or  edit  an  existing 
document.  These  changes  are  stored  locally  on  your  com- 
puter, and  when  you  go  online,  they  are  synchronised  with 
the  Google  Docs  server.  Gmail  also  provides  this  facility 
now,  however  it  needs  to  be  turned  on  separately  in  Gmail 
Labs  as  it  is  still  in  development. 

All  Gears  needs  to  function  is  a  plug-in  that  is  available 
for  free  in  the  Google  Docs  web  site. 

Many  other  technologies  exist  which  leverage  the  power 
of  AJAX,  even  for  the  facilities  that  the  technologies  above 
provide,  many  alternatives  exist.  All  in  all,  learning  how  to 
harness  the  power  of  AJAX  is  a  good  idea  even  if  you  plan  to 
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develop  applications  for  the  desktop,  or  what  your  applica- 
tion to  be  available  offline. 

So  now  that  you  can  see  how  far  AJAX  reaches  out,  you 
should  know  where  you  can  go  to  find  out  more.  For  this 
we  have  provided  in  the  next  chapter,  a  list  of  resources 
available  for  your  perusal.  So  onward!  You  have  places  to  go 
and  things  to  do! 


7.2  Web  development  software  and 
tools 

In  this  article,  in  many  places  we've  mentioned  different 
technologies  and  products,  and  here  we  list  where  they  can 
be  found  on  the  web. 


Web  Development  IDE 


Name 

Web  site 

License  type(s) 

Aptana 

http://www.aptana.com/ 

Free  and 

Commercial  (Pro) 

Adobe 

http://www.adobe.com/ 
products/dreamweaver/ 

Commercial 

Zend  Studio 

http://www.zend.com/ 

Commercial 

Microsoft 

Expression 

Studio 

http://www.microsoft.com/ 
expression/ 

Commercial  and 
Free  (Express) 

Quanta  Plus 

http://quanta.kdewebdev. 
org/ 

Open  Source 

Eclipse  with 
Web  Tools 
Platform 

http://www.eclipse.org/ 
webtools/ 

Open  Source 
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XML  Editing  Tools 

F 
A 
S 
T 

Name 

Web  site 

License  type(s) 

Altova 
XMLSpy 

http://www.altova.com/ 

Commercial 

T 

R 

oxygen  XML 
editor 

http://www.oxygenxml.com/ 

commercial 

C 
K 

T 

OpenXML 
editor 

http://www.philo.de/xmledit/ 

XMLmind 

http://www.xmlmind.com/ 
xmleditor/ 

Free  (Personal) 
and  Commercial 

0 
A 

(Professional) 

J 

XML  Copy 
Editor 

http://xml-copy-editor.source- 
forge.net/ 

Open  Source 

A 

X 

Conglomerate 

http://www.conglomerate.org 

Open  Source 

Free  and 

Syntex  Serna 

http://www.syntext.com/ 

Commercial 

(Serna 

Enterprise) 

Xerlin 

http://www.xerl  in.org/ 

Open  Source 

WYSIWYG  HTML  Software 

Name 

Web  site 

License 
type(s) 

Amaya 

http://www.w3.org/Amaya/ 

Open  Source 

Komposer 

http://kompozer.net/ 

Open  Source 

N|vu 

http://www.net2.com/nvu/ 

Open  Source 

BlueGriffon 

http://bluegriffon.org/ 

Open  Source 

Adobe 

http://www.adobe.com/prod- 

Commercial 

Dreamweaver 

ucts/dreamweaver/ 

Zend  Studio 

http://www.zend.com/ 

Commercial 

Microsoft 

Expression 

Studio 

http://www.microsoft.com/ 
expression/ 

Commercial  and 
Free  (Express) 
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F 

S 
T 

JavaScript  frameworks 

Name 

Web  site 

Dojo 

http://dojotoolkit.org/ 

T 
1 

R 
A 

Ext 

http://extjs.com/ 

Spry 

http://labs.adobe.com/technologies/spry/ 

C 

MooTools 

http://www.mootools.net/ 

K 

Prototype 

http://www.prototypejs.org/ 

T 

script. aculo. us 

http://script.aculo.us/ 

0 

QooxDoo 

http://qooxdoo.org/ 

jQuery 

http://jquery.com/ 

A 
J 
A 

MochiKit 

http://www.mochikit.com/ 

Midori 

http://www.midorijs.com/ 

X 

Yahoo  Ul  Toolkit 

http://developer.yahoo.com/yui/ 

wamp  Software 

Name 

Web  site 

Apache2Triad 

http://apache2triad.net/ 

EasyPHP 

http://www.easyphp.org/ 

WampServer 

http://www.wampserver.com/en/ 

XAMPP 

http://www.apachefriends.org/en/xampp. 
html 

Online  learning  Resources 

Here  are  some  places  you  can  go  to  learn  more  on  AJAX: 

Name 

Web  site 

w3Schools 

http://www.w3schools.com/ 

Lynda.com 

http://www.lynda.com/ 

Adobe  developer 
Connection 

http://www.adobe.com/devnet/ 

Developer  Tutorials 

http://www.developertutorials.com/ 

O'Reilly 

http://oreilly.com/ 

Quackit 

http://www.quackit.com/ 
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Corrigendum 

The  writers  for  Fast  Track  to  Digital  Photography 
also  included  Madhusudhan  Mukherjee,  Rossi 
Fernandes  and  Siddharth  Parwatay. 
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